請更新您的瀏覽器

您使用的瀏覽器版本較舊,已不再受支援。建議您更新瀏覽器版本,以獲得最佳使用體驗。

科技

Line Awesome 提供超過 1,380 免費 icon 圖標,個人、商用皆可

電腦王阿達

發布於 2019年11月02日15:39 • Rocky

有在經營網站或部落格的人都知道,有時候發文章或內容時,都會希望用一些小 icon 讓這段文字、文章看起來更豐富生動,而網路上雖然有很多相關免費 icon 資源,但每一個都上傳,不僅會佔用容量,也稍微會影響該篇文章的讀取速度,這篇就要推薦一個知名 icons8 推出的 Line Awesome 開放原始碼圖標,只需要在 header 加入一段 code,即可透過 css 使用超過 1380 漂亮 icon,個人、商用都行。

Line Awesome ,2019-11-02_160211
Line Awesome ,2019-11-02_160211

Line Awesome 提供超過 1,380 免費 icon 圖標,個人、商用皆可

點我進到 Line Awesome 網站後,先取得要加入 header 的 code,點選 “Getting Started”:

2019-11-02_155948
2019-11-02_155948

點一下 If you are stating a new project…. 下方的 code,就會自動複製到剪貼簿:

2019-11-02_160439
2019-11-02_160439

接著就貼在你網站的 Header 處,我以 Wordpress 為例,如果你也是使用 Wordpress,但不知道怎麼找到 Header,可以下載 Insert Code 之類的外掛:

2019-11-02_160955
2019-11-02_160955

加入完成後,就可以開始尋找你要使用的 icon,左邊為各分類,非常多,動物、聲音&影片、飲料、品牌 icons、商業等等都有,妳也能直接輸入 icon 的關鍵字(英文):

2019-11-02_160007
2019-11-02_160007

我以 Android 小綠人為例,打開 icon 選單後,會找到四種方法,複製 icon 圖示、Class、Unicode、link,看你要用哪一種都行,我以 link 為例:

2019-11-02_160135
2019-11-02_160135

把這段貼在你的文章中,中間也能加上一些字,看你要怎麼呈現:

2019-11-02_161630
2019-11-02_161630

我這段就會變成這樣,完全不用上傳圖片,靠 css 就能實現使用超過 1380 icon,省空間又快速:

2019-11-02_161642
2019-11-02_161642

如果你不習慣用這種方式,icons8 也是有提供 SVG 圖檔下載,數量又更多了,不過使用條款下載前記得看一下,我記得有些似乎無法商用。

補充資料

Line Awesome 網址:https://icons8.com/line-awesome

0 0
reaction icon 0
reaction icon 0
reaction icon 0
reaction icon 0
reaction icon 0
reaction icon 0

留言 0

沒有留言。