【Wordpress】網站添加阿里巴巴Iconfont圖示詳細圖文教程

為了提升網站的視覺效果和用戶體驗，本文將為你提供一個詳細的步驟，教你如何將阿里巴巴的Iconfont圖示集成到你的網站中。 通過簡單的操作，你可以輕鬆使用數百萬個免費圖示，為網站增添更多美觀的元素。

使用教學

Iconfont 支援使用 GitHub 帳號登錄，登錄后你可以輕鬆瀏覽並選擇所需的圖示，快速找到符合需求的向量圖示。

1.首先，流覽並找到你需要的圖示，點擊“添加到我的圖示庫”按鈕，將其加入你的圖示庫中。

2.接著，點擊右上方的購物車圖示，然後選擇“添加至專案”選項，將圖示添加到你的專案中。

3.添加完成後，頁面會自動跳轉到“我的專案”頁面。 如果沒有自動轉入，請點擊頁面上方功能表中的「資源管理」，然後選擇「我的專案」查看已添加的圖示。

網站集成

使用 Iconfont圖示 圖示官方也有詳細的教程，同時官網提供三種集成方式：Unicode、class、Symbol。 這三種集成方式各有優劣勢，具體請查看官方教程

這裡我推薦使用 Symbol 的方式集成到網站中，當然你也可以按照官方的教程使用其它方式集成

第一步：將剛剛新建的專案生成 Symbol 接入連結，並複製

第二步：將代碼保存到主題設置

將以下代碼中的連結替換為您剛剛複製的連結，將下方代碼添加到你的網站，WordPress使用者可以在後台自定義HTML。

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

簡單吧！ 網站集成 Iconfont圖示 就已經全部搞定了！ 接下來就是使用 Iconfont圖示 了！

提醒：WordPress使用者請勿直接將代碼寫入到主題源碼，一更新就沒了。

使用 Iconfont圖示

使用之前先去給圖示添加一些CSS樣式（子比主題勿用）

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

在已經添加到你專案中查找圖示並複製圖示代碼 href="#iconxxx"，然後按照下面的格式替換中的圖示代碼，將代碼插入到你需要顯示圖示的地方！

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

還是按照在導航功能表中添加圖示為例：

效果演示

最後我們看看效果吧！