Taiwan Icon Fonts 黑熊不用自己畫!台灣特色圖標字體

Jojo Chiao
4 min readAug 15, 2020

--

讓世界注意到台灣,他們做了這款專屬「台灣」的 Icon Fonts

source : TW Icon Fonts

「我們計畫目的就是支援「台灣」的自由與尊嚴。通過這個 Taiwan Icon Font,讓世界注意台灣、吸引來台灣旅遊、理解台灣的正確、最後增加跟我們一樣喜歡的台灣的粉絲們。」- TW Icon Font

在台南生活的日本設計師 Holoko,跟來自英國的工程師 Rob,希望讓世界看見「台灣」,做了這套富有台灣各地特色的圖標字體(好感人...)

進入 Taiwan Icon Fonts 網站後,可以看見熟悉的建築、風景、食物、用品,舉凡故宮、安平古堡、女王頭、Youbike、珍奶、台灣黑熊都做成了一個個 icon,讓你可以下載取用,重點是可商用、可改作,怎麼這麼佛啦!

Icon 就 Icon,幹嘛做成字體

這位同學你問的有點兇,但好像是多數人會有的疑問,如果要開放 icon,就直接丟個共享圖包上去讓大家抓不就好了,還做成字體多麻煩

欸~將 Icon 做成字體可是好處多多,除了可以在 Ai、Word、Sketch 上運用,最主要用在網頁上可以直接改 icon 顏色、大小、對齊等等,比起塞入圖片,直接嵌入字體會方便很多,Taiwan Icon 提供了 CSS、OTF、SVG 等格式,平面設計或網頁設計都好用:

https://www.twicon.page/get_started.html

For DTP (Desktop Publishing)

將下載資料夾內的 List.html 丟進瀏覽器,複製列表上想要的 icon,在 Ai 或 Sketch 內貼上後,字體選擇「Taiwan icon」即可

(我用 Safari 打開 html 會顯示亂碼,用 Chrome 就正常,試試看囉)

選擇字體「Taiwan icon」就會出現對應 icon

For Web

如上所說, Icon Font 最方便的用途就是可以在設計網頁時,請工程師大大直接 link CSS 檔案,想要哪個 icon,直接貼上他們提供的 code 一鍵完成,也可以直接更改 icon style,不需要出一堆 bear_yellow、bear_red、bear_green 的圖包,累了自己

使用方式一樣是參照 List.html 裡的 icon,在<head>內加上
<link rel="stylesheet" href="twicon/twicon.css"> ,想要哪個 icon 再貼上 Mark up for web 那一欄的 code 就會顯示在網頁上

Icon Fonts 五告讚

之前在跟前端工程師配合時,就有聽過 fontawesome 這個平台,它的用法跟上述 Taiwan icon 類似,嵌入 CSS 檔案後就可以取用它提供的 icon。雙平台的 Material Design 也有 icon library,至於 Apple 的 SF Symbols 應該也是相同概念,只是給 iOS app 使用。雖然 icon fonts 目前支援單色切換,還是有些限制,如果不想被侷限,也可以利用 Icomoon 或其他資源設計自己的 icon fonts!

最後,真的非常感謝 Holoko 和 Rob 做了這款富有台灣特色的 Icon Fonts,如果喜歡的話,趕快去下載來用用看吧!

--

--

Jojo Chiao

學習動能隨著八大行星運轉的 UI/UX Designer,更新頻率不一之驚喜包