返回目录:word文档
图标字体
在前端开发中,图标是最常见的用于美化页面的元素。
早前还需由UI人员做成各种小图片然后放到页面中,随着移动端应用的普及,为了更好的缩放效果,节省流量,提高运行效率,现在都已经改成了图标字体的技术,而很少需要用图片来完成了。
图标字体,就是一种特殊的字体,只不过显示出来不是字而是一个图形。
最常见的一种就是windows自带的特殊字符,比如我们可以直接写出“○●◎→←↑↓”这样的简单图形,由于无需调用图片,能像写字一样写出来,性能优异而且使用方便。
windows自带的特殊字符是很有限的,所以图标字体的技术逐渐发展起来,工程师们自己造图形文字,写成字库,现在很多前端UI框架,像流行的bootstrap,ElementUI等,几乎都内置了大量的图标字体。
为什么要做自己专属的图标字库
既然框架里都集成了图标字体,那我们还去做自己的图标字库有什么意义呢?
当然是有意义的,首先,并非每个项目都会使用到那些框架。其次,即使用了这些框架,他们集成的图标也是有限的,并不一定能满足使用需求。再次,即使只使用少量的几个图标,也需要带上整个框架的庞大图标字库,那不是很低效吗?
所以,制作自己的精选图标库,或者为自己的某个项目制作专属的图标库,就显得非常有必要了,也方便以后重复使用或移植。
今天,就教给大家如何只用3个步骤制作自己的图标字体库
第一步,打开阿里图标库
网址 https://www.iconfont.cn
这是阿里巴巴开源的图标库,全部免费使用,而且还是矢量图标哦!赶紧注册登录吧!
第二步,选择图标加入购物车
阿里巴巴号称里面已经有585万个免费图标了,是的,你没有看错,总有一款适合你!点击加入购物车!
第3步,下载图标
进入购物车,直接下载,当然这个是免费的哦!
图标字体的使用
首先把字库文件全部放到比如font目录下
然后在页面里引入
现在就可以使用了。在下载的压缩包里有个demo_index.html,里面有图标列表,还有详细的说明,可以用3种方式使用,区别在于易读性和浏览器兼容性。文档很长,要是你没耐心读,那么就用我教你的这个法子好了,先看图标列表,比如可能是这样:
如果我们需要用户头像这个,对应的是 icon-user,那就这样写:
于是span这个地方就会变成人像图标了,是不是很好用呢?
除了使用现成的图标,也可以自己创作或者编辑修改,网站上也提供了丰富的工具。