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

2024-10-31 23:20:34

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

2、第二，我们在UI界面.hml文件的head中加入<head><include src="font-awesome.inc.htm" /></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中

5、第五，我们把空上test-fontawesome.htm拖到sciter的客户端上可以看到效果如下的图标字体，可视化的显示前面就是图标文字显示效果，后面的字母代表的是你需要加到.htm中的代码

6、第六，接下来，我们看看加到.htm中代码显示效果代码如下：<body><ul><li>&fa-bold;</li><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>可视效果如下：

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