WP网站导航菜单图标添加方法_iconfont_Font Awesome

你一定看到过别人的网站导航菜单带有图标（如果你不知道怎么自己建网站，那么可以回到奶爸建站笔记首页看一看导航。），例如首页有一个房子图标，购买按钮前面有一个购物车图标，设置按钮前面有齿轮图标等等。就像下图演示的这种。

那么是怎么实现这种图标效果的呢？

其实这只是引入了一种图标字体而以，本文就教大家如何给WordPress或者其他网站程序的菜单或者任何位置添加图标的方法。

图标字体介绍

图标字体，从字面意义上可以理解成它本身是一种字体文件，只不过都是图标的字体。在一些手机APP或者网页设计的时候通常会碰到图标的使用，最早的网页设计都是做图标图片文件，但是由于不同的分辨率，会导致图标模糊不清，所以后面开始有了使用图标字体代替图标图片的应用。

图标字体有很多种，有收费的，也有免费的，本文介绍两款应用的比较多的图标字体：iconfont和Font Awesome

iconfont图标字体使用方法

Iconfont是阿里巴巴打造的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。功能强大，图标丰富，而且是国内的平台，网速快。

访问iconfont

Iconfont使用步骤：

1. 访问网站，右上角登录。
2. 挑选你喜欢的图标，点击购物车按钮收藏入库。
3. 右上角购物车按钮，添加至项目。
4. 创建一个项目名，并确定。
5. 复制代码，添加到网站css文件中。
6. 前台使用li标签引用图标。

Iconfont具体使用方法：

挑选你想要的图标，添加到购物车。

挑选完毕后，网页右上角购物车，点击后添加到项目。

创建一个项目，后期想增加图标还可以直接添加到项目里面。

确定后出现代码，复制所有的代码，添加到你WordPress主题的css文件里面。如果你不会添加，也可以添加到主题自定义的自定义css代码框里面。

然后把下面的css代码同样添加进去，定义class的。

/* 定义class */
.iconfont{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

接着回到你想要显示图标的地方，例如菜单，在导航标签这里添加i标签就可以调用图标了。

<i class="iconfont">图标代码</i>

<link rel='stylesheet' href='你的iconfont Font class代码' type='text/css' media='all' />

Font Awesome图标字体使用方法

Font Awesome有好几个网站，这里以http://fontawesome.dashgame.com/为例，使用方法如下：

在你主题的header.php（其他网站就在网页头部代码）里面添加下面这串代码：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

然后同样使用i标签调用图标就行了。

<i class="fa fa-camera-retro"></i> fa-camera-retro

更多使用方法可以参见官网

WordPress插件方式

如果你对添加网页代码不熟悉，那么也可以直接使用WordPress插件的方法来实现，只要你服务器性能好，别怕插件装的多。

例如安装Font Awesome

下载地址

安装启用后，在设置里面可以设置显示方式，以webfont方式显示还是以svg图标显示。

使用的时候同样使用i标签调用：

<i class="fas fa-stroopwafel"></i>

另外插件还支持短码调用：

[icon name="stroopwafel"]

更多图标字体

图标字体除了本文推荐的iconfont和Font Awesome外，还有很多可用的，你可以根据自己需要选择。

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

icomoon

http://icomoon.io/app/#/select

可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。很酷吧！

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Dashicons图标字体

https://blog.naibabiji.com/skill/wordpress-user-dashicons.html

WordPress后台自带字体，可以直接使用。

上面就是wp博客如何给菜单添加fontawesome图标的所有内容，赶紧去给你网站菜单添加图标吧。