子比主题利用阿里巴巴矢量图标美化导航栏菜单

前言：

其实对于WordPress我是一个菜鸟，我基本都是搬运过来的，但是可以在泉雨的站点看到效果。子比主题已经集成了Font Awesome 图标，但是Font Awesome 图标不好看，所以今天引用阿里巴巴矢量图标库的彩色图标的方式美化下，具体操作如下：

第一步：打开阿里巴巴矢量图标库网址

第二步：注册登录之后返回首页搜索需要的图标-如下图

第三步：寻找自己的需要的图标，通通点进购物车！

第四部：再把购物车的图标加入到项目，如果还未创建项目，那就新建一个就是了

第五步：选择Symbol格式，然后点击：暂无代码，点击生成

复制代码

第六步：把生成的代码引入至主题

将以下代码中的链接替换为您刚刚复制的链接，然后 进入 主题设置-自定义代码-自定义底部代码 ，粘贴后保存主题设置

<script src="你刚刚复制的代码"></script>

网站集成 Iconfont图标 就已经全部搞定了！接下来就是使用 Iconfont图标 了！

第七步：使用 Iconfont图标

在已经添加到你项目中查找图标并复制图标代码，然后按照下面的格式替换href="#iconxxx"中的图标代码，将代码插入到你需要显示图标的地方！

<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg>

添加导航菜单中首页图标为例：复制3图标代码

添加到导航标签

最后我们看看效果吧！

------本页内容已结束，感谢您的观看，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。