Npcink Blog
切换菜单

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

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

最后更新于
本页目录8 节

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

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

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

一

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

二

选择图标管理，如图

wordpress或网站中阿里图标库引用彩色图标的方法介绍（精）

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

三

创建项目，如下图

wordpress或网站中阿里图标库引用彩色图标的方法介绍（精）

四

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

wordpress或网站中阿里图标库引用彩色图标的方法介绍（精）
wordpress或网站中阿里图标库引用彩色图标的方法介绍（精）

五

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

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

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

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

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

wordpress或网站中阿里图标库引用彩色图标的方法介绍（精）
此处的代码在您添加新图标后需要更新

再在主题根目录下的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>
wordpress或网站中阿里图标库引用彩色图标的方法介绍（精）

如果你的 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;
    }