Icon Font 的使用方式

之前介紹過「Web Font 的使用方式」，這篇則是介紹Icon Font 的使用，Icon Font 顧名思義就是使用小圖示( icon ) 當作字體，只需要打入對應的代碼，或是加上固定名稱的 ... ARCHIVE ABOUT CONTACT Designthinkingiseverywhere IconFont的使用方式 之前介紹過「WebFont的使用方式」，這篇則是介紹IconFont的使用，IconFont顧名思義就是使用小圖示(icon)當作字體，只需要打入對應的代碼，或是加上固定名稱的樣式，就能夠產生一個小圖示。

這種方式的好處其實不少，因為使用IconFont除了可以減少圖片的使用率，也可以讓icon的大小、顏色都能夠像文字一樣隨心所欲的調整，但相對的也是有些壞處，例如一定得使用外部載入字體、icon只能夠使用單色(因為文字只能單色)...等。

參考：WebFont的使用方式 對於要自己製作IconFont的朋友們可以參考這篇文章：Howtomakeyourowniconwebfont，我這邊就不多作介紹，因為就算你會自己製作自己的IconFont，最後你還是會使用免費的WebIconFont，為什麼呢？畢竟WebIconFont是眾多設計師的結晶，而且版權免費公開，在這個資訊爆炸快速的時代，用最省力的方式當然是最好的，加上近年來Bootstrap的興起，連帶搭配許多IconFont都是免費且容易被大眾所接受的，我們就不用在花時間，設計出一個還要測試大眾口味的icon囉！ 現在開始介紹如何使用IconFont，首先我們要先知道哪裡有免費的IconFont可以使用，可以參考下列網站： FontAwesome Fontello Icomoon WELOVEICONFONTS 這幾個網站的使用方式都差不多，第一個步驟一定得載入他們的css，以FontAwesome來說，這是一個有搭配BootStrap的IconFont網站，相較於其他網站必須自己輸入對應的Unicode來說，更為便利使用，因為只需把icon放在裏頭，要輸入對應的class，這個就會變身成為對應的icon。

(使用方式) 若使用FontAwesome，我們要先載入這個CSS，你也可以下載下來放在自己的網站空間。

接下來只要參考網站所列的icon列表，輸入對應的class，就能夠產出對應的icon： fa-camera-retro 而也可以根據不同的class放大縮小 fa-lg fa-2x fa-3x fa-4x fa-5x 官方網站還列出了更多的樣式，都是單純使用搭配class就可以辦到了。

(參考這篇) 順應扁平化設計的趨勢，CSS3技術的興起，以及瀏覽器的進步，使用IconFont的方式也越來越普遍，但我認為一個好的網頁設計，也不單純只是靠一個新的技術就夠了，如何讓IconFont和傳統的Icon做最完美的搭配，如何讓IconFont和版面有最佳的協調性，才是一個好的網頁設計最重要的精神所在喔！ BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO