有在經營網站或部落格的人都知道,有時候發文章或內容時,都會希望用一些小 icon 讓這段文字、文章看起來更豐富生動,而網路上雖然有很多相關免費 icon 資源,但每一個都上傳,不僅會佔用容量,也稍微會影響該篇文章的讀取速度,這篇就要推薦一個知名 icons8 推出的 Line Awesome 開放原始碼圖標,只需要在 header 加入一段 code,即可透過 css 使用超過 1380 漂亮 icon,個人、商用都行。
Line Awesome 提供超過 1,380 免費 icon 圖標,個人、商用皆可
點我進到 Line Awesome 網站後,先取得要加入 header 的 code,點選 “Getting Started”:
點一下 If you are stating a new project…. 下方的 code,就會自動複製到剪貼簿:
接著就貼在你網站的 Header 處,我以 Wordpress 為例,如果你也是使用 Wordpress,但不知道怎麼找到 Header,可以下載 Insert Code 之類的外掛:
加入完成後,就可以開始尋找你要使用的 icon,左邊為各分類,非常多,動物、聲音&影片、飲料、品牌 icons、商業等等都有,妳也能直接輸入 icon 的關鍵字(英文):
我以 Android 小綠人為例,打開 icon 選單後,會找到四種方法,複製 icon 圖示、Class、Unicode、link,看你要用哪一種都行,我以 link 為例:
把這段貼在你的文章中,中間也能加上一些字,看你要怎麼呈現:
我這段就會變成這樣,完全不用上傳圖片,靠 css 就能實現使用超過 1380 icon,省空間又快速:
如果你不習慣用這種方式,icons8 也是有提供 SVG 圖檔下載,數量又更多了,不過使用條款下載前記得看一下,我記得有些似乎無法商用。
補充資料
Line Awesome 網址:https://icons8.com/line-awesome