字体图标:顾名思义就是看起来像是一张图片,实际上是一个特殊的字体。
我们先看看有哪些场景会应用到字体图标
为什么要使用字体图标:
-
[1] 渲染快减少服务器请求字体图标的渲染要比图片渲染的快;就好比我们打开一个网页时往往看到的是文字,随后才看到图片一点一点的加载显示出来。
-
[2] font-size、color直接作用字体图标。字体图标看上去像图片但本质还是字体,所以它的字体大小由font-size的增加而变大;值得一提的是我们知道图片放大会失真,但是我们字体图标却不会存在这种情况,并且color直接作用字体颜色,但是要注意的是字体图标不建议使用多重颜色(例如颜色过渡 background-image: linear-gradient不建议使用)
-
[3] 兼容性非常好几乎兼容市面上所有主流浏览器,甚至IE6。
下面讲讲怎么使用阿里巴巴字体图标库iconfont
- [1] 进入下面网址:www.iconfont.cn/
- [2] 进入页面后需要注册后才能使用
- [3] 搜索所需字体图标,并加入购物车
- [4] 点击购物车添加到项目
- [5 ] 点击更新代码,复制代码,代码1为外部链接,2为类名
外部链接代码如下:注意复制下来的外部链接要加协议名,不加协议名可能会出现字体图标显示不出来的情况
字体图标类名代码如下:注意要写两个类名一个是:iconfont类名(必须写),第二个是复制后的类名
如果还有不清楚的小伙伴建议去iconfont网址查看: