[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"content-query-nQkSBTp5jw":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"category":5,"createdAt":10,"updatedAt":11,"body":12,"_type":154,"_id":155,"_source":156,"_file":157,"_stem":158,"_extension":159},"/article/coding/what-is-icon-font","coding",false,"","Icon Font 是什麼？要怎麼使用呢？","Icon Font 在現今網頁運用廣泛，用來輔助搭配文字等也能增加使用者介面的美感，那到底什麼是 Icon Font 呢? 它基本上就是把 icon 當作字體，放入相對應的代碼或指定的名稱，就能夠產生一個小圖示，以下圖 Font Awesome 為例，可以看到利用偽元素來將特定的 Unicode 轉換顯示成好看的圖示：","2023-08-21","2023-08-22",{"type":13,"children":14,"toc":151},"root",[15,22,27,44,113,118,122,127,131,145],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":9},"text",{"type":16,"tag":23,"props":24,"children":26},"markdown-img",{"src":25},"articles/what-is-icon-font-1.jpg",[],{"type":16,"tag":17,"props":28,"children":29},{},[30,32,42],{"type":21,"value":31},"要產出這樣的圖示也很簡單，可參考",{"type":16,"tag":33,"props":34,"children":39},"a",{"href":35,"rel":36,"target":38},"https://fontawesome.com/",[37],"nofollow","_blank",[40],{"type":21,"value":41},"官方網站",{"type":21,"value":43},"如何用 NPM 或 Yarn 拉取圖示庫後，在 HTML 貼上如下：",{"type":16,"tag":45,"props":46,"children":50},"pre",{"className":47,"code":48,"language":49,"meta":7,"style":7},"language-html shiki shiki-themes material-theme-palenight","\u003Ci class=\"fa-brands fa-docker\">\u003C/i>\n","html",[51],{"type":16,"tag":52,"props":53,"children":54},"code",{"__ignoreMap":7},[55],{"type":16,"tag":56,"props":57,"children":60},"span",{"class":58,"line":59},"line",1,[61,67,73,79,84,89,95,99,104,108],{"type":16,"tag":56,"props":62,"children":64},{"style":63},"--shiki-default:#89DDFF",[65],{"type":21,"value":66},"\u003C",{"type":16,"tag":56,"props":68,"children":70},{"style":69},"--shiki-default:#F07178",[71],{"type":21,"value":72},"i",{"type":16,"tag":56,"props":74,"children":76},{"style":75},"--shiki-default:#C792EA",[77],{"type":21,"value":78}," class",{"type":16,"tag":56,"props":80,"children":81},{"style":63},[82],{"type":21,"value":83},"=",{"type":16,"tag":56,"props":85,"children":86},{"style":63},[87],{"type":21,"value":88},"\"",{"type":16,"tag":56,"props":90,"children":92},{"style":91},"--shiki-default:#C3E88D",[93],{"type":21,"value":94},"fa-brands fa-docker",{"type":16,"tag":56,"props":96,"children":97},{"style":63},[98],{"type":21,"value":88},{"type":16,"tag":56,"props":100,"children":101},{"style":63},[102],{"type":21,"value":103},">\u003C/",{"type":16,"tag":56,"props":105,"children":106},{"style":69},[107],{"type":21,"value":72},{"type":16,"tag":56,"props":109,"children":110},{"style":63},[111],{"type":21,"value":112},">\n",{"type":16,"tag":17,"props":114,"children":115},{},[116],{"type":21,"value":117},"即可產生出 Docker 的 Icon！官方也推出一個蠻酷的功能，可根據你用的不同開發工具來引入：",{"type":16,"tag":23,"props":119,"children":121},{"src":120},"articles/what-is-icon-font-2.jpg",[],{"type":16,"tag":17,"props":123,"children":124},{},[125],{"type":21,"value":126},"以 Vue 為例，可使用 bind 功能來動態綁定想要的 Icon！",{"type":16,"tag":23,"props":128,"children":130},{"src":129},"articles/what-is-icon-font-3.jpg",[],{"type":16,"tag":17,"props":132,"children":133},{},[134,136,143],{"type":21,"value":135},"Icon Font 被當作文字一樣所以可以加上 CSS 像是加顏色，但同樣也跟文字一樣只能用單色，其他優點像是在顯示上縮放不會失真，更酷的是它還可以做到動畫效果(animation)，很不可思議吧！有興趣的人可以到",{"type":16,"tag":33,"props":137,"children":140},{"href":138,"rel":139,"target":38},"https://fontawesome.com/icons/docker?f=brands&s=solid",[37],[141],{"type":21,"value":142},"官方網站的範例 Docker Icon",{"type":21,"value":144},"看看實際動畫效果吧！",{"type":16,"tag":146,"props":147,"children":148},"style",{},[149],{"type":21,"value":150},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":152,"depth":152,"links":153},2,[],"markdown","content:article:coding:what-is-icon-font.md","content","article/coding/what-is-icon-font.md","article/coding/what-is-icon-font","md",1766375573984]