免费程序语言、设计、开发工具图示集 Icon Font、SVG 两大格式

我介绍过不少免费图示,但可能都没有我接下来要推荐的图示集特别,有时开发者需要在网站里放上一些技术相关标志,例如主机商告诉客户支援那些技术(Nginx、 PHP、MySQL),专案网页显示此程式支援那些浏览器(Google Chrome、Firefox、Safari),或者你的网站是使用那些技术建置等等,一般作法是会直接放上对应图示,取代文字说明,不过现在有一套免费图示集已经把这些可能会用到的图案一次搞定,只要复制程式码就能快速套用到你的网站或服务。

本文要推荐的「Devicon」是一款免费图示集,以收录程式语言、设计和开发工具为主,常见的技术相关标志图案都可在这套图示中找到。 Devicon 提供两种使用方式:图示字型或 SVG 向量图格式,只要从网站上找到你要的图案,直接将产生的代码复制、贴上,就能快速取用图案。

免费程序语言、设计、开发工具图示集 Icon Font、SVG 两大格式

值得一提的是无论是使用字型档或 SVG,都可透过 CSS 调整大小或显示方式,让它能被使用于任何网页或网路服务。除此之外,字型档也已经支援 CDN,开发者无须自行托管档案,节省流量开销。如果你刚好需要取用这些标志图案,Devicon 是个非常方便的选择。

网站名称:Devicon

网站地址:https://konpa.github.io/devicon/

使用教学

STEP 1

开启Devicon 网站(目前版本为2.0),右侧会列出所有图示集图案,左侧则有「超级」快速设定方法,简单来说,选择你要的图案后,快速设定下方就会显示出对应的程式码,将程式码复制到网站适当位置就能够显示。

免费程序语言、设计、开发工具图示集 Icon Font、SVG 两大格式

STEP 2

Devicon 也有提供 WordPress 的标志,点击后会发现图式字型有四种样式,SVG 版本有三种,看起来颜色不太一样,有些除了 Logo 外还会加入英文标志。

免费程序语言、设计、开发工具图示集 Icon Font、SVG 两大格式

STEP 3

我们把画面再拉近一点,字型版本的图示使用方式会多一行程式码,主要是载入字型和CSS,必须把那段样式表链结放到你的网站<head></head > 部分;接着再把底下的那段程式码加入网页里要显示图示的位置,重新整理页面就能看到效果。

免费程序语言、设计、开发工具图示集 Icon Font、SVG 两大格式

如果你只想单独取用一两个图示,可能 SVG 版本会更适合你,至少不用载入完整字型档及 CSS 样式表,在请求数与流量方面都能够大幅节省。 SVG 形式是直接以程式码绘制,因此只要三行代码就能直接在网页内将图案绘制出来,非常强大,有兴趣的朋友可将产生的 SVG 程式码复制回去自己网站测试一下。

免费程序语言、设计、开发工具图示集 Icon Font、SVG 两大格式

关注天时,分享价值

更多内容,请到天时网