在網站上常常會使用到 icon 圖示做為點綴，而現今行動版普及化，響應式網站大多使用縮放都不會失真的 svg 向量圖檔，來獲得最佳的視覺體驗。網路有很多的插件內建 svg 圖示可以做為字型使用，例如 fontawesome 使用上就很方便快速，不過有時候想要自行定義圖示，或是只有用到少數的 icon，不想載入太大包檔案，這次要介紹的就是可以自行客製 icon 的 icoMoon

IcoMoon App 概述

5500 多個免費圖標
可以導出 SVG、PNG 等格式的圖標，IcoMoon 生成可與 use 標籤一起使用的內聯 SVG
導入客製的向量圖，生成圖標字體
IcoMoon 生成的代碼文件（HTML、CSS、JS）是 MIT 許可的，可免費使用
IcoMoon 應用程序中所做的幾乎所有事情都發生在本地。例如，當導入 SVG 圖像/字體或生成字體時，一切都發生在自己的瀏覽器中，不會上傳到 IcoMoon 的服務器

IcoMoon 教學

先進入 IcoMoon App

STEP 1.加入 icon

🔸 加入 IcoMoon 所提供的 icon
從 Icon Library 圖示庫可以加入你想要的圖示，Add 為免費直接加入，Purchase、Go Premium 需要升級購買

🔸 客製 icon
左上點擊 Import Icons，將 svg 圖檔匯入，如圖

STEP 2.選取要使用的 icon

將要使用的 icon 點選起來，選起來的圖示會自動變成一個 Selection

STEP 3.生成圖標字體或圖示，Download

你可以選擇使用 Generate Font 或 Generate SVG & More 其中一種

🔸 選取 Generate Font
產生圖標字體，Download 檔案後引入到自己的專案，即可使用裡面的 class，並用 font-size 就可以調整大小

1	<span class="icon-smile"></span>

點選圖示的 Get code，即可查看語法

🔸 選取 Generate SVG & More
也可以生成 svg 圖示，Download 檔案後引入到自己的專案，用繪製 svg 的方式顯示 icon

<svg class="icon icon-smile"><use xlink:href="#icon-smile"></use></svg>

<symbol id="icon-smile" viewBox="0 0 32 32">
<path d="M25.632 10.65c0 1.432-1.16 2.592-2.592 2.592s-2.592-1.16-2.592-2.592c0-1.432 1.16-2.592 2.592-2.592s2.592 1.16 2.592 2.592z"></path>
<path d="M11.955 10.65c0 1.432-1.16 2.592-2.592 2.592s-2.592-1.16-2.592-2.592c0-1.432 1.16-2.592 2.592-2.592s2.592 1.16 2.592 2.592z"></path>
<path d="M16.774 24.877c-8.429 0-15.008-6.022-15.11-6.112l1.312-1.402c0.55 0.512 13.619 12.416 26.022 0.026l1.357 1.357c-4.602 4.595-9.325 6.131-13.581 6.131z"></path>
</symbol>

點選圖示的 Get code，即可查看語法

icoMoon 真的是簡單又好用，尤其是可以自訂圖示的部分更是加分，大家也可以使用看看哦😊

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

icoMoon 教學-將 icon 生成圖標字體