先看看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彩色图标」即可获得手把手代码安装教程!
隐藏内容需要回复可以看见
(๑•̀ㅂ•́)و✧
有任何问题可以骚扰小助手哟!
卧槽!无奈本人没文化,一句卧槽行天下!
温柔解救不了这个世界
失去故土的花朵,回不去,却也离不开。
人,百年一世;龙,百年一岁。君生吾已老,君未变,而吾已老。
冬至子月,证启明兆。倚伏依之。