魏艾斯笔记WordPress网站导航栏一般是比较单一的文字，比如很多主题的导航栏、目录都是文字光秃秃的不好看。如果能添加 fontawesome图标，加以适当装饰就会变得生动、有趣起来。如果你能合理放置WordPress导航栏图标会让整个网站都变得更美观。
给网站文字添加fontawesome图标
我们常用的图标网站是：fontawesome中文，提供了几百种各式各样的图标供免费选择使用。很多Wordpress主题都默认支持 fontawesome图标，比如魏艾斯笔记正在使用的 dux主题就是这样。Avada主题也是默认支持图标，这个内容在Avada主题导航菜单icon图标如何添加里面分享过了。
下面老魏以魏艾斯笔记为例讲解如何在 dux主题导航栏中添加图标。
1、登录wordpress后台 >外观>菜单，首先通过新建导航菜单的方式，组建起菜单来。比如你可以先考虑下网站导航栏打算放什么内容、分类、栏目、专题等等，然后先添加好，再如下图所示拖拽进入导航菜单中。
2、如下图左侧可以从页面、文章、自定义链接、分类目录、格式、专题这些部分中拖拽内容到右侧，组成菜单。关于添加菜单的内容请移步WordPress菜单设置教程。
wordpress添加菜单
3、随意点开一个导航栏目（下图中的下三角箭头），会看到【导航标签】代码如下图所示：
wordpress菜单导航标签代码
老魏把这段代码贴出来并解释一下：
<i class=”fa fa-pencil” aria-hidden=”true”></i> Avada
上面用<i></i>标签包裹的就是从 fontawesome 复制来的图标代码，后面的 Avada就是导航目录名。
4、从 fontawesome网站【图标库】中找到你喜欢的图标后点击，进入图标详情页面，如下图所示点击红框后面的复制源码。
fontawesome网站【图标库】复制源码
粘贴到上面【导航标签】中，后面跟上导航栏目名字，最后一定要在菜单页面右侧点击【保存菜单】才能生效。
5、最后看一下fontawesome图标的效果如何：
fontawesome图标的效果
或者你也可以直接看本页面最上面或打开魏艾斯笔记任何一个页面看页头的导航栏效果。
老魏总结
- 绝大多数 wordpress主题都支持 fontawesome图标，我们要做的就是选择好合适图标，复制源码添加到【导航标签】里面，后面附上导航栏目名就完成了；
- 老魏使用过程中发现某些图标可能会对导航栏目名有遮盖效果，建议更换合适的图标；
- 如果你的主题不支持，也可以在上面提到的网站上找到代码添加到<head></head>中间，让网站支持fontawesome图标；
- 当你知道如何使用fontawesome后，就可以用<i>标签包裹起来，用到网站任意位置（不止局限于导航栏）；
- fontawesome图标还可以改变大小，列表或导航时固定宽度（解决图标对不齐的问题），轻松实现引用效果，使任意图标旋转，对图标进行任意旋转和翻转等等效果；
- 给网站文字添加fontawesome图标能够有效美化网站整体效果，通过WordPress导航栏图标吸引用户注意力也能让用户驻留，延长停留访问时间，在一定程度上为网站seo优化助力。