WordPress使用彩色阿里巴巴iconfont图标库（精华版）

盾给网

5年前

阿里图标库允许自定义图标，上面有非常丰富的图标。本教程展示如何使用他家的图标作为菜单图标。

使用彩色图标

创建项目

登录阿里图标

https://www.iconfont.cn

创建一个项目

创建好项目以后，就可以去添加自己需要的图标了，找打图标，点击添加到购物车

添加完成后需要添加到项目，可以选择右上角的购物车图标，点击添加至项目。

找到我的项目，可以看到我们添加的图标

选择Symbol，生成一个链接，复制这个链接，就可以拿到WordPress里面使用了。

阿里巴巴给的JS代码为

//at.alicdn.com/t/font_859606_zk6ek3lk12i.js

这里我们要修改一下JS代码

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

我使用的是春哥的7B2主题所以我直接扔到了基本设置—统计代码里面

添加CSS阿里巴巴给我的CSS代码为

<style type="text/css">.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
style>

这里我们也要修改一下修改成为以下

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

仍入子主题CSS文件即可

接下来就是引入彩色图标了

在后台找到菜单

引入菜单代码如下：

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

使用彩色图标

创建项目

相关推荐: