字体图标的应用场景及优点

352 阅读2分钟

字体图标:顾名思义就是看起来像是一张图片,实际上是一个特殊的字体。

我们先看看有哪些场景会应用到字体图标

字体图标.jpg

为什么要使用字体图标:

  • [1] 渲染快减少服务器请求字体图标的渲染要比图片渲染的快;就好比我们打开一个网页时往往看到的是文字,随后才看到图片一点一点的加载显示出来。

  • [2] font-size、color直接作用字体图标。字体图标看上去像图片但本质还是字体,所以它的字体大小由font-size的增加而变大;值得一提的是我们知道图片放大会失真,但是我们字体图标却不会存在这种情况,并且color直接作用字体颜色,但是要注意的是字体图标不建议使用多重颜色(例如颜色过渡 background-image: linear-gradient不建议使用)

  • [3] 兼容性非常好几乎兼容市面上所有主流浏览器,甚至IE6。

下面讲讲怎么使用阿里巴巴字体图标库iconfont

  • [1] 进入下面网址www.iconfont.cn/
  • [2] 进入页面后需要注册后才能使用
  • [3] 搜索所需字体图标,并加入购物车

搜索所需字体图标.jpg

选定所需图标并加入购物车.jpg

  • [4] 点击购物车添加到项目

点击购物车添加到项目.jpg

  • [5 ] 点击更新代码,复制代码,代码1为外部链接,2为类名

点击更新代码,复制代码.jpg

外部链接代码如下:注意复制下来的外部链接要加协议名,不加协议名可能会出现字体图标显示不出来的情况

外部链接.jpg

字体图标类名代码如下:注意要写两个类名一个是:iconfont类名(必须写),第二个是复制后的类名

图标类名.jpg

详解.png 如果还有不清楚的小伙伴建议去iconfont网址查看:

help.jpg