天兴工作室

天兴工作室制作的zblog主题里面大部分都集成了Font Awesome图标字体，使用图标字体有很多优点，用字体代替图标，加载快，使用灵活。

有些客户反馈说不知道怎么修改这些图标字体，本文来做一个详细的说明。

下面以天兴工作室企业主题6来做演示说明。这款主题幻灯片下面有一个模块就是使用了图标字体：

下面我们来修改这些图标，打开网站后台--右上角主题配置--里面可以修改主题的各项自定义配置项。打开首页调用，找到“首页服务项目”，修改此处即可，图标字体的完整代码如下图：

<i class="fa fa-briefcase"></i>这就是一个完整的图标字体代码，怎么修改呢？

打开这个网站“http://www.fontawesome.com.cn/faicons/”，里面有很多图标，每个图标都对应一个代码。

你想用哪个图标，复制对应的代码，然后替换掉“<i class="fa fa-briefcase"></i>”这个代码后面的“briefcase”即可。一定要注意只能替换这一段，前面一定要保留“fa fa-”，否则不会生效的。

举例我们想用下图红框里面的图标：

那么直接复制对应代码“address-book”替换后的代码为“<i class="fa fa-address-book"></i>”。

然后就没有然后了，保存提交，前台就可以看到效果了。

现在网页流行的不外乎什么自适应（各种框架）、扁平化。图标字体正好符合了这一趋势。使用图标字体优点有：

1、在移动设备、Retina屏幕展示效果优良。

2、拥有跨浏览器支持(甚至是IE6，例如，使用@font-face渲染网页字体)

3、如果使用者调整他们的浏览器设置，可以动态缩放。  

4、可以呈现不同颜色。   

5、可以体现字体和文字相关的CSS属性(就像文字的阴影和渐变)

本文来为大家介绍下zblog使用图标字体的步骤。注意：zblog为zblogphp版本，图标字体用的是较为流行的Font Awesome。

1. 下载Font Awesome，去官网下载。

2. 文件下载后解压，得到两个文件夹，font和css。上传至你正在使用的主题的“style”文件夹内。

3. 修改你正在使用主题的header.php文件，插入“<link rel="stylesheet" rev="stylesheet" href="{$host}zb_users/theme/{$theme}/style/css/font-awesome.min.css" type="text/css" media="all"/>”。

4. 在想要调用图标字体的地方插入”<i class="fa fa-thumbs-o-up"></i>“这种代码即可调用了。

5. 图标字体的具体调用方法可参考的中文翻译版网站：点击进入。
   

最终效果：