有在经营网站或部落格的人都知道,有时候发文章或内容时,都会希望用一些小 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