你一定看到过别人的网站导航菜单带有图标，例如首页有一个房子图标，购买按钮前面有一个购物车图标，设置按钮前面有齿轮图标等等。就像下图演示的这种。
那么是怎么实现这种图标效果的呢？
其实这只是引入了一种图标字体而以，本文就教大家如何给WordPress或者其他网站程序的菜单或者任何位置添加图标的方法。
图标字体介绍
图标字体，从字面意义上可以理解成它本身是一种字体文件，只不过都是图标的字体。在一些手机APP或者网页设计的时候通常会碰到图标的使用，最早的网页设计都是做图标图片文件，但是由于不同的分辨率，会导致图标模糊不清，所以后面开始有了使用图标字体代替图标图片的应用。
图标字体有很多种，有收费的，也有免费的，本文应用的比较多的图标字体：iconfont
iconfont图标字体使用方法
Iconfont是阿里巴巴打造的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。功能强大，图标丰富，而且是国内的平台，网速快。
Iconfont使用步骤：
- 访问网站，右上角登录。
- 挑选你喜欢的图标，点击购物车按钮收藏入库。
- 右上角购物车按钮，添加至项目。
- 创建一个项目名，并确定。
- 复制代码，添加到网站css文件中。
- 前台使用li标签引用图标。
Iconfont具体使用方法：
挑选你想要的图标，添加到购物车。
挑选完毕后，网页右上角购物车，点击后添加到项目。
创建一个项目，后期想增加图标还可以直接添加到项目里面。
确定后出现代码，复制所有的代码，添加到你WordPress主题的css文件里面。如果你不会添加，也可以添加到主题自定义的自定义css代码框里面。
添加Font class内容到你主题的页面header.php文件里面。代码如下：
<link rel='stylesheet' href='你的iconfont Font class代码' type='text/css' media='all' />
接着回到你想要显示图标的地方，例如菜单，在导航标签这里添加i标签就可以调用图标了。
<i class="iconfont icon-xxx"></i>
如果还不会，请访问官网教学
支持
@om 谢谢