ICON Font-以文字形式取代圖片的圖標字型 - 網頁設計
文章推薦指數: 80 %
ICON Font的優缺點如下:. 優點:. 1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。
2.可透過css設定文字大小和文字顏色、陰影來 ...
首頁
文章專區
網頁設計相關文章
ICONFont-以文字形式取代圖片的圖標字型
文章專區
網頁設計相關文章
文章專區MENU
最新文章訊息
網頁設計相關文章
SEO與搜尋行銷相關
網頁程式技術探討
ICONFont-以文字形式取代圖片的圖標字型
在網頁設計上,icon設計與應用是相當常見的,
而使用上除了將icon存成圖片以外,還可以將之作成ICONFont。
那麼到底什麼是ICONFont呢?
ICONFont是指將繪製好的向量圖檔轉存為文字檔,
並以css設定成字型來取代原有的圖片物件,在使用上只需輸入該icon對應的代碼或class,
就能夠輕鬆地產生一個小icon。
ICONFont的優缺點如下:
優點:
1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。
2.可透過css設定文字大小和文字顏色、陰影來達成效果。
3.修改時只需透過css修改樣式即可,不需再重複做修改圖片的工作。
4.因為是向量文字,相對在放大縮小時,解析度不受影響。
缺點:
1.由於文字形式只能設成單色,因此icon只能為單色或為css3的漸變色。
2.需借助專業的工具生成文字檔,製作方法可參考IcoMoon-將icon轉成Font的平台
綜合以上優缺點,使用ICONFont,不論是在檔案大小或修改的方便性來說,還是略佔優勢,
除了可自行設計以外,也可利用網路搜尋到不少免費的ICONFont資源,讓icon應用上更省力。
那麼該從哪裡下載免費的ICONFont呢?
除了上述的IcoMoon以外,這裡提供幾個主要的平台
FontAwesome:可參考Font-Awesome-簡單又好用的icon素材網,只要一行字即可直接使用!
Fontello
WELOVEICONFONTS
其實這些網站的ICONFont使用方式都差不多,首先都需先載入他們網站所提供的css,
然後輸入你要使用的icon所對應的代碼即可。
隨著扁平化設計逐漸普及,ICONFont在網頁設計上越來越常見,
而豐富的網路資源也能夠提高網站開發的速度,提升工作效率,不妨多加使用。
更多文章
客製化網站和套版網站的差別-一化網頁設計
客製化網頁設計的優點-一化網頁設計
穿透的Div-CSS的pointer-events屬性
瀏覽器支援度檢測-CSS@support的用法
不用再清除float浮動了!CSS的display:flow-root屬性
網頁設計使用CSS排版對SEO的影響
什麼是RWD(響應式網頁設計、回應式網頁設計)?
回列表頁
Close
關於一化
作品展示
專案側寫
網路行銷
線上問答
文章專區
聯絡我們
延伸文章資訊
- 1Icon Font - 免費資源網路社群
Unicons Icon Library 超過4500 個免費圖示向量圖和網頁字型下載. 2021-09-05 by Pseric. Unicons 是一套收錄超過4500 種圖案的圖示庫,來自...
- 2ICON Font-以文字形式取代圖片的圖標字型 - 網頁設計
ICON Font的優缺點如下:. 優點:. 1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。 2.可透過css設定文字大小和文字顏色、陰影來 ...
- 3Fontastic 免費網頁圖示字型(Icon Fonts)產生器 - 免費資源 ...
Fontastic 是一個很強大的Icon Font 產生器,使用方法是選擇你要運用到網頁裡的圖示,設定好調用的前置詞,網站就會依照你選取的圖示產生TTF、SVG、EOT、WOFF 四種字型檔案...
- 4Icon Font 的使用方式
之前介紹過「Web Font 的使用方式」,這篇則是介紹Icon Font 的使用,Icon Font 顧名思義就是使用小圖示( icon ) 當作字體,只需要打入對應的代碼,或是加上固定名稱的...
- 5Taiwan Icon Font
免費公開的台灣的Icon Font,景點、產品、交通、文化、動物、品牌、記號等有100個,我們跟台灣人說「STAND BY TAIWAN」