鐵人賽：網頁設計- Icon fonts 的常見資源 - 卡斯伯Blog

如果要使用Fontawesome 的圖示做設計，可以直接點選For the Desktop 下載圖示，下載後就包含大量的圖示SVG 可以直接運用。

因為有數千組圖示可以運用， ... CSS JS 生活 文章列表 關於 設計師轉職前端工程師，擅長將複雜觀念用圖形化方式呈現 追蹤卡斯伯 什麼是iconfontsFontawesome給予開發者的說明GoogleFonts自製Webfonts結語 按讚，就是最大的支持 卡斯伯提供的教學資源： 近期活動通知： Modaltitle ... 關閉 designironman 2018-10-31 網站開發加入一些圖示點綴，除了可以增加網頁的豐富度外，同時可以讓用戶從圖示中了解當下的行為為何。

過去圖示大多使用png來呈現，具有豐富的色彩及尺寸，但隨著設計的概念不斷調整，現在流行單色系的小圖示，以及為了增加圖示可運用性目前大多使用向量的方式呈現。

接續前文所介紹，SVG是可縮放的向量圖形，作為圖示運用有一定的優勢，本篇會介紹如何取用向量圖示資源，以及iconfonts的運用方法。

什麼是iconfontsIcon是圖示，fonts是字體，兩者混在一起就是圖示字體（被揍 簡單來說，我們平常使用的字體會有外觀上的不同，而iconfonts就是使用圖示修改掉特定的字體符號，讓他顯示成不同的圖形。

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

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

技術上來說，大多是透過修改字體並從偽元素插入特定的Unicode的編碼文字來套用圖示，但也有部分的Webfonts是採用其它的渲染技巧。

接下來就能如圖中一樣的顯示這個icon，並且這個icon依然具有文字的特性，可參考：https://fontawesome.com/v4.7.0/icon/address-book FontawesomeFontawesome是目前使用相當廣泛的iconfonts，目前版本為5.4.x版，而除了iconfonts以外，現在更有SVG動態插入的方式。

5.x版本：https://fontawesome.com/4.x版本：https://fontawesome.com/v4.7.0/ 如果要使用Fontawesome的圖示做設計，可以直接點選FortheDesktop下載圖示，下載後就包含大量的圖示SVG可以直接運用。

因為有數千組圖示可以運用，下載後難以從字面上直接了解圖示外觀，建議使用時可以搭配官方的圖示列表來快速搜尋，開發者也能夠從中快速了解設計師所用的icon為何。

Fontawesome的圖示也有分為免費與付費版，所能套用的Webfonts也有所不同，設計師使用時要特別注意，不過也不得不說，雖然付費版僅是粗細上的不同，但付費版的icon還是好看許多:D。

給予開發者的說明雖然fontawesome提供兩種方式運用在icon上，一則是本文重點iconfonts，另一種則是透過js來插入SVG。

如果你需要使用fontawesome做開發建議使用iconfonts的方式載入，如果想改用SVG的方式，可能會有動態切換上的問題，建議先讀過官方文件是否有合適的解決方案，並且實際測試後沒有問題再使用。

GoogleFontshttps://material.io/tools/icons/ MaterialDesignIcon也是一種字體icon，也與Fontawesome一樣具有大量的icon及搜尋功能，並且是完全免費，但比較特別的是使用「連字方法」來做icon的呈現。

連字方法(usesatypographicfeaturecalledligatures)：https://google.github.io/material-design-icons/#using-the-icons-in-html 連字方法的特色在於Icon本身依然具有「詞彙意義」，它是透過一個單詞的判別轉為一個圖形，如下圖icon除了呈現一個臉以外還具有「face」的辭意，並且可以透過搜尋方式找到這個圖形。

自製Webfonts雖然上述服務已經提供大量的icon，但設計中有時還是有不夠用的時候，自行開發icon也是個選項，以下我有撰寫過svg轉webfontsicon的方法，給大家參考看看： 自行開發的方法：https://wcc723.github.io/css/2016/12/13/gulp-dev-env/ 結語Webiconfonts現在網頁開發已很常見的手法，主要原因是只要一個className就能輕鬆運用，當然現在也有svgicon的運用方法，但相對於webiconfonts來說還沒那麼流行。

撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 上一篇：鐵人賽：網頁設計-SVG輸出注意事項 下一篇：鐵人賽：網頁設計-響應式圖片選用技巧 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 相似文章 翻譯MaterialDesign心得 距離上次的文章也將近一個月…，這段時間主要是在翻譯GoogleDesign，所以有一段時間沒有發新的文章。

然而翻譯GoogleMaterialDesign的原因，也是想要讓中文化後的更多人閱讀，進而引起大家的討論。

整體翻譯的時間從6月27日到7月23日將近一個月的時間，特別感謝從一開始就協助... 安裝Gitbook 利用Gitbook製作電子書是相當容易的，作者只要熟悉markdown語法以及簡易的安裝，就可以快速編寫屬於自己的書籍，它有著以下幾點特色。

利用git版本控制 用git就可以發佈新版本 利用markdown語法編寫 包含手機版 這邊就簡單介紹如何安裝gitbookserver在自己本機上，... 前端設計師的設計與執行 圖片來源googlematerialdesign 看到嫁給RD的UIDesigner的這篇文章有感，想說也寫一下我對於這個主題的想法，在工作的流程中，每個人所佔的崗位不同，都會有不同的觀點，她的這一篇所在的角色是UI，我的看法是設計師與前端之間的角色。

從學設計到現在轉職成前端，因... 視覺前端-按鈕的個性 在參加完鐵人賽以後，會想要再精進UI設計的部分，所以想試著寫設計得文章，接下來會連續幾篇UI設計的文章，有些是在鐵人賽前就準備好的，最近在重新整理PO出來，希望大家會感興趣。

網路上有許多開源的Framework，通常我都會參考他們的按鈕以及表單設計，因為這是最能夠表達Framework特色的元件。

... 粉絲專頁 卡斯伯 標籤雲 BootstrapSassasyncawaitbeginnerbootstrapborderbusinesscompasscoursescssd3d3jsdesigndevelopdnsemmetes6fire.appgitgithubgridgulphtmliconfontsiconsintroironmanjavascriptjekylljestjqueryjslifemacmarkdownmobilemodulesnode.jsnodejsnpmoocssosxprojectpromisepuppeteerrailsreactjsrubysassscsssketchsslstudysublimetextsvgtesttooltoolsvscodevuewebworkshopzeplin履歷 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮))