icon font 使用圖示字體(icon font) FontAwesome

一個字型擁有超過7000個圖示字體。

超過1609個免費圖示字體，不必擔心版權問題。

Icon Font 資源. 網頁設計筆記 WebDesign 首頁/網頁設計講義 iconfont使用圖示字體(iconfont)FontAwesome 圖示字體｜iconfont｜概述 FontAwesome操作 圖示字體｜iconfont｜概述 名詞釋義 圖像圖示：網頁設計常需要設計小ICON作為辨識內容與增加美觀之用，也為一般所稱之UI（UserInterface-使用者介面）。

通常網站設計的過程中，由美編人員設計ICON，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點： ICON風格都不大一樣，造成美觀上會有落差。

製作速度慢，因為所有的ICON都要蒐集或是交由美編人員去製作。

所有ICON都是使用圖示的方式，所以網站的流量較大，甚至有可能較慢。

因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真。

圖示來源｜flaticon IconFont｜圖示字體：Icon是圖示，fonts是字體，兩者混在一起就是圖示字體。

簡單來說，我們平常使用的字體會有外觀上的不同，而iconfonts就是使用圖示修改掉特定的字體符號，讓他顯示成不同的圖形。

如下圖所示，iconfonts本質就是字體，也能夠像其它字體一樣安裝於系統中。

實際運用在網頁上時，除了圖形顯示外也同時具備文字的特性，如：可縮放、可改變色彩、可套用文字陰影，且只要載入CSS即可運作。

參考文章｜Iconfonts的常見資源 有別於上述圖像圖示的缺點，目前出現了一些將ICON製作成文字字型，解決上述問題，以FontAwesome為例，原理是把圖示ICON都製作成文字的字型(Fonts)，然後再透過CSS或javascript的技術將圖示ICON呼叫出來，它擁有以下優點： 圖示放大、縮小不失真。

呼叫使用相當簡單，可變化多種模式。

一個字型擁有超過7000個圖示字體。

超過1609個免費圖示字體，不必擔心版權問題。

IconFont資源 FontAwesome：Fontawesome是目前使用相當廣泛的iconfonts，目前版本為6版，而除了iconfonts以外，現在更有SVG動態插入的方式。

有分為付費版和免費版，以下將以此為範例做說明。

官網連結｜FontAwesome官方網站｜FontAwesomeICONS GoogleFonts：MaterialDesignIcon也是一種字體icon，也與Fontawesome一樣具有大量的icon及搜尋功能，並且是完全免費，但比較特別的是使用「連字方法」來做icon的呈現。

官網連結｜MaterialDesignIcon官方網站 IcoFont：2100多個免費圖標，為您的創意設計增添趣味。

官網連結｜IcoFont TWIconFonts：100個可愛的台灣免費圖標。

官網連結｜TWIconFonts IcoMoon 官網連結｜IcoMoon WELOVEICONFONTS 官網連結｜WELOVEICONFONTS Fontello-iconfontsgenerator 官網連結｜Fontello FontAwesome操作 FontAwesome官方網站｜ FontAwesomeICONS 操作步驟 在html文件的＜head＞＜/head＞中加入fontawesome＜script＞語法，即可啟動與呼叫fontawesome圖示字體。

來源｜FontAwesome文件說明 點選FontAwesomeIcons頁面：可搜尋或選擇要使用的圖示字體，直接點擊進入圖示文字頁面。

來源｜FontAwesomeIcons 進入該圖示文字頁面，複製上方語法，貼到html檔案中想要出現的地方即可。

來源｜FontAwesomeanchor 也可下載svg檔案，成為可編輯的向量檔案。