icon font 使用圖示字體(icon font) FontAwesome
文章推薦指數: 80 %
一個字型擁有超過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檔案,成為可編輯的向量檔案。
延伸文章資訊
- 1鐵人賽:網頁設計- Icon fonts 的常見資源 - 卡斯伯Blog
如果要使用Fontawesome 的圖示做設計,可以直接點選For the Desktop 下載圖示,下載後就包含大量的圖示SVG 可以直接運用。 因為有數千組圖示可以運用, ...
- 2Font Awesome Icon Pack | Fill | +365 .SVG Icons - Flaticon
Download now Font Awesome Free Icons - Pack Fill | Available sources SVG, EPS, PSD, PNG files. Pe...
- 3icon font 使用圖示字體(icon font) FontAwesome
一個字型擁有超過7000個圖示字體。 超過1609個免費圖示字體,不必擔心版權問題。 Icon Font 資源.
- 4The 50 Best Free Icon Fonts for UI Design
We have a collection of the best @font-face icon fonts that you can freely download and use in yo...
- 5Taiwan Icon Font 台灣圖示字型,100 個專為台灣打造的圖 ...
Taiwan Icon Font 台灣圖示字型. 安裝完畢後,打開壓所檔內的List.html,開啟圖示清單。 免費字型下載. 中間欄位為此圖示的中文說明,要使用的話複製 ...