Typicons 免费下载上百个设计完美的通用向量图示集

腾讯云

近期出现非常多的向量图示集,或者可以说是素材库,以网页字型(Webfont)方式载入图示后继透过CSS显示某个图案,这么做的好处是支持各种尺寸萤幕,包括Retina 显示器,而且也能够在最短时间开启网页,不使用担心拖慢显示速度。此外,一套图示里有非常多图形,可以用于使用者介面开发或原生应用程式,如果你正好缺图,可以来 本文介绍的网站找。

Typicons是一款开放原始码、设计线条简单的免费图示集,一共有336 种图案,使用者只需要从Github 网站下载特定档案,再将它载入网站或专案就能使用,其中包含原始的SVG 格式,使用者也能依照自己需求来建构你自订的图示集。

如同于之前介绍过的Octicons、Evil Icons 和Entypo,其实在使用上大同小异,如果你不清楚如何使用,Typicons 也提供完整的「How to use Typicons」教学,若你使用Bower 可以透过一行指令取得这套图示的相关档案,其他使用者则可从Github 获取所有档案。

网站名称:Typicons

网站地址:http://typicons.com/

使用教学

STEP 1

开启 Typicons 网站后,可以看到所有图示集里的图案,目前一共 336 种,其实好像没有限定那一种类型的操作介面或应用程式才能用,种类还蛮完整的。

STEP 2

将滑鼠游标移动到图示上方,除了会放大显示,还能从下方得知这个图示的名称,这是用来载入显示某个图示使用的,稍后我会再提到更详细的使用方法。

STEP 3

点击Typicons 网站上方的「Download」按钮连接到GitHub,可以取得原始码档案,择一下载即可,最主要的是/src/font/ 资料夹下的档案,不知道语法怎么写,请参考demo 网页档的原始码写法。

STEP 4

在「How to use Typicons」也有简易教学,其实只要放上一段载入typicons.min.css 样式表的语法,或者从你现有的CSS 加入@font-face 载入.eot、.woff、.ttf、 .svg 等几个必要档案就能使用,网站上提供范例写法,路径稍微改一下就能使用。

本文前面第二个步骤显示的图示名称其实就是 CSS 样式,透过 <span> 标记的 class 来载入图示就能使用,更多设定方法可以参考官方网站的说明文件。

关注天时,分享有价值的知识

更多内容,请关注天时网

广告也精彩

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: