7B2美化 | 引用阿里矢量图标库添加彩色图标

由于这个主题和子比主题有着一定的区别,直接引用阿里巴巴图标有点丑。

前言

现在大部分博客图标都采用Font Awesome图标库,因为Font Awesome图标库满足了大部分用户的需求了,但做为喜欢花里胡哨的我们是不够的,Font Awesome图标库的图标不仅没有彩色的图标,个性化的图标还有点少!

所以对于我们喜欢彩色的菜单图标选择性很少!

所以只能引入其他的矢量图标库,今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

阿里巴巴矢量图标库网址:https://www.iconfont.cn/

首先引入JS代码

在当前主题设置—>自定义JS代码 添加下面代码:(下面src=”这里是上面的JS代码,自行替换”)

<script src="//at.alicdn.com/t/font_2101442_j448m0ggtp.js"></script>

这里是和子比主题区别开来的(添加css样式)

以下是修改后的 CSS 代码,实现了将图标放大 1.5 倍,并使其与后面的文字间隔一个字符

在当前主题设置 –> 自定义CSS代码 或者目录下的 header.php 文件中适当位置添加以下代码:(不适用的,自行调整宽度)

.icon {
    width: 1.5em; 
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 1ch;
}

最后添加彩色图标

在WordPress后台—> 外观 —> 菜单 —> 导航标签 添加以下代码

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

上面的iconziyuan对应图标代码 //就是图库下面的图标名称

有问题及时联系站长,QQ:1240555208
更多优质资源在QQ群里,可以进群领取:467392290~
© 版权声明
THE END
点赞9
及时反馈~ 抢沙发

请登录后发表评论

    暂无评论内容