先看看Wordpress添加彩色图标教程Demo:
WordPress添加彩色图标教程Demo
大家都知道，wordpress可以支持fontasome字体，但是目前没有彩色图标，用时间久了难免会引起审美疲劳，因此飞小优拿自己的站私下练了练，接下来将操作的WordPress添加彩色图标具体教程分享给大家。
老样子，操作前需要按照以下清单：
一、前期准备
引入外部js代码；
iconfont添加项目；
引入图标symbol代码；
1.1 引入外部js代码
引入代码前需要知道，一般代码是安装在style.css文件里，但是这个是外部引用，因此需要将js引入到
<head></head>中
所以具体的步骤就是：添加外部引用代码+添加图标的css代码，以飞优网为例，大家可以看仔细点，我是怎么操作的（细分动作），先登录iconfont官网（注册步骤略），如图：
按照上面的排序进行各个击破，我这个是已经在前台添加好了一些图标的（你自己喜欢那种自己直接点击加入购物车就行），由于这里我没有写如何添加图标在自己的项目里（感兴趣的可以看我以前的帖子，传送门：wordpress如何添加iconfont图标）。添加完后，按照步骤2将生成的代码直接添加到网站头部区域<head></head>,那么书写代码规则如下：
<script src="你复制的js代码"></script>
你也可以将这src地址复制到浏览器中，就是这样的（密密麻麻，可以不用管），这个是在阿里云库里的js，属于公共的外部js库
JS复制到网站后台区域（自定义css区域，wp后台都有），如下：
注意这里的只是引入了公共库，这里的地址是随着你不断更新添加icon后而变化，也就是说只要你新增或减少都需要将这里的js更新同步到你的自定义css头部区域，那么你将这些图标输出到哪些地方？那需要怎么做？
二、彩色图标使用场景
以飞优网为例，我的使用场景主要在导航上，因此我们需要在添加一段css到自定义css区域或者（style.css），代码如下，
<style type="text/css">
.icon {
width: 1em; height: 1em;/*可以自行调节设置尺寸*/
vertical-align: -0.15em;/*可以自行调节设置尺寸*/
fill: currentColor;
overflow: hidden;
}
</style>
添加后如图，
好，添加完后，最后一步，直接将目标icon加到导航，那么这里也需要在添加代码：
<svg class="icon" aria-hidden="true"> <use xlink:href="#你自己的图标代码"></use></svg>
千万不要忘记了“#”，我之前就忘记了，导致导航出不来效果，那么菜单位置添加如图：
最后，可以在前台上看看效果：
方框中的彩色图标是不是很nice呢？操作也是很简单吧，你想不想获得这样的彩色图标呢，按照教程你就可以拥有，操作遇到问题可以在本站留言，小编会及时解答！
以上教程只针对小白用户，会CSS的其实只是几分钟的事情，更多wp问题知识请关注留言！
留言下方回复「wp彩色图标」即可获得手把手代码安装教程！
隐藏内容需要回复可以看见
![数字营销的升级实战分享[数字营销平台搭建教程免费下载]](https://img.funion.info/user_files/242/screenshot/60796269_1650459399.png)
(๑•̀ㅂ•́)و✧
有任何问题可以骚扰小助手哟！
卧槽！无奈本人没文化，一句卧槽行天下！
温柔解救不了这个世界
失去故土的花朵，回不去，却也离不开。
人，百年一世；龙，百年一岁。君生吾已老，君未变，而吾已老。
冬至子月，证启明兆。倚伏依之。