怎么引用阿里巴巴矢量圖標庫彩色圖標？ – 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="http://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;
    }

相關推薦