现在很多响应式站点都喜欢使用图标字体，特别是在导航菜单使用得特别多，所以今天就跟大家说一说 zblogPHP 站点如何使用 Font Awesome 图标字体（PS：WordPress 站点使用更简单，可以直接安装插件 Font Awesome 4 Menus，或者根据本文的方法直接集成到主题中）。
Font Awesome 图标字体介绍
Font Awesome 为您提供可缩放的矢量图标，您可以使用 CSS 所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
- 一个字库 675 个图标：仅一个 Font Awesome 字库，就包含了与网页相关的所有形象图标。
- 无需依赖 JavaScript：Font Awesome 完全不依赖 JavaScript，因此无需担心兼容性。
- 无限缩放：无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。
- 如言语一般自由：Font Awesome 完全免费，哪怕是商业用途。请查看许可。
- CSS 控制：只要 CSS 支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。
- 高分屏完美呈现：Font Awesome 的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。
- 完美兼容其它框架：尽管是为 Bootstrap 设计，但 Font Awesome 同样能与其它框架完美协同运作。
- 可用于桌面系统：用于桌面系统，或需要一套完整的矢量图，请查看备忘。
- 可适配于屏幕阅读器：与其它字体不同，Font Awesome 不会影响屏幕阅读器正常工作。
zblogPHP 站点集成 Font Awesome 图标字体
1、到官网去下载最新版 Font Awesome，将下载所得的 font-awesome-4.7.0.zip 压缩包解压后，将其中的 fonts 和 css 两个文件夹上传到我们正在使用的主题的“style”文件夹内。PS：其实也可以将两个文件夹的内容合在一起，其中 css 文件夹的 font-awesome.css 和 font-awesome.min.css 保留其中一个即可。
2、打开正在使用的主题\template\php文件，在适当位置（比如在引入主题 style.css 文件下方）插入以下代码：
- <link rel=“stylesheet” rev=“stylesheet” href=“{$host}zb_users/theme/{$theme}/style/css/font-awesome.min.css” type=“text/css” media=“all”/>
添加代码完成后的代码见下图所示：
3、理论上，图标字体可以用在网站的任意位置，只需要用 i 标签加 class 来添加即可。比如我要加入微信图标，我只要在需要显示的位置添加如下标签即可：
- <i class=“fa fa-weixin”></i>
而我们想要更多的图标，就需要到官方的图标库里面去查找，找到合适的图标后，点击打开即可得到相应的标签 class 了。
4、使用了图标字体的导航菜单效果图
桂公网安备 45010502000016号