htmlayout设计ui 基础篇：[12]图标字体Awesome

时间：2026-02-16 13:03:09

1、第一，我们先得到这个字体文件～

一个.htm文件，一个.ttf字体文件

2、第二，我们在UI界面.hml文件的head中加入

<head>

</head>

说明：

这个src所指向的就是你刚才的字体文件中的.htm文件了,保证路径正确

3、第三，接下来，我们在style中加入

<style>

@font-face {

font-family: FontAwesome;

src: url(fontawesome-webfont.ttf);

}

li { font:10px FontAwesome;}

</style>

说明：

1、@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

2、设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。

我们这里，就是用@font-face把你本地的字体给指定出来，让你的文件直接使用

4、第四，我们来看看，如何把这个图标字体加载到你的文件中进行使用，在Sciter的事例文件中，我们可以用带有的客户端，显示成图标供你可视化的选择和查看

文件在：samples\font-@-awesome中

htmlayout设计ui 基础篇：[12]图标字体Awesome

5、第五，我们把空上test-fontawesome.htm拖到sciter的客户端上可以看到效果如下的图标字体，可视化的显示

前面就是图标文字显示效果，后面的字母代表的是你需要加到.htm中的代码

htmlayout设计ui 基础篇：[12]图标字体Awesome

6、第六，接下来，我们看看加到.htm中代码显示效果

代码如下：

<body>

<ul>

<li>&fa-italic;</li>

<li>&fa-underline;</i>

<li>&fa-align-left;</li>

<li>&fa-align-center;</li>

<li>&fa-align-right;</i>

</ul>

<body>

可视效果如下：

htmlayout设计ui 基础篇：[12]图标字体Awesome

7、这样就方便很多了，你可以直接编写代码，就可以显示很多不同的图标效果，而且用CSS可以对样式进行修改。