在网站的前端网页制作中，添加一些小图标可以使网页看起来更加的美观，特别是在网站导航菜单中使用得最广泛。如果你没有一些美工底子，又想弄一些漂亮的小图标来装饰你的网页，那么Font Awesome图示字体是一个不错的选择。今天就跟大家说一说Z-BlogPHP站点如何使用Font Awesome图标字体。

字体介绍

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

●一个字库675个图标：仅一个Font Awesome字库，就包含了与网页相关的所有形象图标
●无需依赖JavaScript：Font Awesome完全不依赖JavaScript，因此无需担心兼容性
●无限缩放：无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标
●如言语一般自由：Font Awesome完全免费，哪怕是商业用途
●CSS控制：只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现
●高分屏完美呈现：Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩
●完美兼容其它框架：尽管是为Bootstrap设计，但Font Awesome同样能与其它框架完美协同运作
●可用于桌面系统：用于桌面系统，或需要—套完整的矢量图
●可适配于屏幕阅读器：与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作

使用步骤

1、打开 Font Awesome图标库官网或者下面网盘下载最新版的图标字体

2、解压下载好的图标字体，得到 fonts 和 css 两个文件夹，上传至你正在使用的主题的“style”文件夹内，如下图：

PS：其实也可以将两个文件夹的内容合在一起，其中css文件夹的font-awesome.css和font-awesome.min.css 保留其中一个即可。

3、在网站的头部引用“CSS”文件夹中的“font-awesome.min.css”文件，具体操作就是：修改你正在使用主题的/template/header.php文件，在适当位置（比如在引入主题style.css文件下方）插入以下代码：

<link rel="stylesheet" rev="stylesheet" href="{$host}zb_users/theme/{$theme}/style/{$style}.css" type="text/css" media="all"/> 
<link rel="stylesheet" rev="stylesheet" href="{$host}zb_users/theme/{$theme}/style/css/font-awesome.min.css" type="text/css" media="all"/>

header.php文件添加完代码后如下图：

4、理论上，图标字体可以用在网站的任意位置，只需要用 i 标签加 class 来添加即可调用。比如我要加入“安卓”图标，我只要在需要显示的位置添加如下标签即可：