怎么引用阿里巴巴矢量图标库彩色图标？ – WordPress教程

这一次的wordpress美化教程我们就来看看如何使用阿里巴巴矢量图标库里的彩色图标吧。

在网站里添加一些有趣的图标可以更加有力的吸引访客，还能给你的网站增添不少靓丽的风景，而阿里巴巴矢量图标库里就有很多免费的图标可以使用，这一次的wordpress美化教程我们就来看看如何使用吧。

官方介绍：详情
原文来源：详情

首先解释一下彩色图标是什么？又或者我们可以把彩色图标用在什么地方：

当然我是将字体图标下载下来引用然后修改css控制变色的，不算真正的彩色字体图标。下面我就来介绍一下彩色图标的运用：

一

图标库网址：https://www.iconfont.cn

二

选择图标管理，如图

这里的JS在你添加新图标后，需要更新，方可同步新添加的图标。

三

创建项目，如下图

四

选择你喜欢的图标，然后添加为购物车，再从顶部购物车按钮添加至您的项目

五

生成第二步骤中提到的生成Symbol图标，是一串js图标

注意细节是，选择图标管理里面，默认不会到我的项目，要点一下项目才可以

原文需要积分，以下内容来自第三方：

必要条件：项目下彩色图标。
复制下图提供的 js引用到主题中。
你可以添加至主题根目录下footer.php文件的顶部

<script src="js代码"></script>

WordPress怎么加载 CSS 和JS？ – WordPress开发

Muze

19年1月13日
喜欢：0
浏览：966

上面这个是例子，您需要放上自己的JS代码，代码在下图所示处获取：

再在主题根目录下的style.css的底部添加以下代码：

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

上述代码仅供参考，不同的主题需要的代码也不同，需自行修改，下面提供了官方2020主题和B2主题的代码，仅供参考。

调用：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#我是复制的代码"></use>
</svg>

如果你的JS是这样的

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

那么可以在菜单中用如下方法添加图标

测试图标<svg class="icon" aria-hidden="true">
<use xlink:href="#iconsousuo"></use>
</svg>111

上述代码仅作演示，实际情况需改用自己的代码。

注意

添加图标后需要在阿里巴巴矢量图标库重新生成JS，重新引用
记得清理下本地的浏览器缓存哦

自带2020主题特辑

.icon-npc {
       display: initial;
       width: 1em; 
       height: 1em;
       vertical-align: -8.5em;
       fill: currentColor;
       overflow: hidden;
       font-size: 26px;  /*大小*/
       vertical-align: middle;
    }

由于该主题自带了同名样式，因此换了个class名字，调用的代码如下：

测试图标<svg class="icon-npc" aria-hidden="true">
<use xlink:href="#iconsousuo"></use>
</svg>111

B2特辑

.icon {
       width: 1em; 
       height: 1em;
       vertical-align: -8.5em;
       fill: currentColor;
       overflow: hidden;
       font-size: 26px;  /*大小*/
       vertical-align: middle;
    }