Taiwan Icon Font

這是一個以台灣旅遊景點為主題的 icon font，昨天 FB 突然一堆朋友在分享，我點進去看了一下也忍不住要分享了。
有在寫網頁的人都知道可愛的 icon 是很重要的~我寫網頁這麼久也是第一次看到以國家為主題的 icon，最有趣的是他的設計者不是台灣人，是日本的設計師和英國程式設計師合作做出來的。
他們明確的在網站上說「WE STAND BY TAIWAN」，日本朋友也一直沒有忘記 2011 年的捐助，我身為台灣人對當初的事情感到驕傲，同時也因為日本朋友把這件事情記這麼久而感動，這是當初台灣人也沒想到的事情吧。

下載及使用：
Taiwan Icon Font：https://www.twicon.page/
進入 Get Started 下載，解壓縮之後會看到已下檔案：
  • twicon
    • twicon.otf
    • twicon.svg
    • twicon.woff
    • twicon.woff2
  • 潡___List.html
那個 html 檔名是亂碼 ~"~，我開起來看了一下是 icon 的 list。
然後網站的意思(中文不是很通順，我盡可能的理解)應該是說在 HEAD 標籤加上：
<link rel="stylesheet" href="twicon/twicon.css">
可是...解壓縮的檔案裡面沒有這個 css 啊...囧。
所以我偷偷去他的官網把 css 載下來，再和解壓縮的檔案融合成一個這樣的檔案結構，順便把我的測試檔案也放進去。
  • fonts
    • twicon.woff
    • twicon.woff2
  • twicon.css
  • testTaiwanIcon.html
就可以看到可愛的台灣黑熊啦~

附上我的測試程式。
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="twicon.css">
    <style type="text/css">
        body {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <i class="twicon-black-bear"></i>
</body>
</html>
參考文件

留言

  1. Louis2021年9月16日 中午12:16:00

    可以請問一下，要怎麼在React.js使用這些icon嗎？

    回覆刪除

張貼留言