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

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

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

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

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

一

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

二

选择图标管理，如图

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

三

创建项目，如下图

四

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

五

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

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

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

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

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

上面这个是例子，您需要放上自己的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;
    }

相关推荐