iconfont 三种使用姿势
1.unicode格式
优点
- 兼容性最好,支持ie6+
- 支持按字体的方式去动态调整图标大小,颜色等等
缺点
- 不支持多色图标
- 在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
使用方法:
第一步:引入自定义字体 `font-face
@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步:定义使用iconfont的样式
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke- 0.2px; -moz-osx-font-smoothing: grayscale; }
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
2.font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
第一步:拷贝项目下面生成的fontclass代码:
引入 ./iconfont.css
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
相对于unicode 它的修改更加的方便与直观。但也有一个大坑,之前楼主一个项目中用到了两组font-class 由于没有做好命名空间,所有的class都是放在.iconfont 命名空间下的,一上线引发了各种雪崩问题,修改了半天,所以使用font-class一定要注意命名空间的问题。
3.symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 支持像字体那样通过font-size,color来调整样式。
- 支持 ie9+
- 可利用CSS实现动画。
- 减少HTTP请求。
- 矢量,缩放不失真
- 可以很精细的控制SVG图标的每一部分
第一步:拷贝项目下面生成的symbol代码:
引入 ./iconfont.js
第二步:加入通用css代码(引入一次就行):
<style type="text/css"> .icon { 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
使用svg-icon的好处是再也不用发送woff|eot|ttf| 这些很多个字体库请求了,我所有的svg都可以内联在html内。
官网参考地址: http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
vue的使用实例, 有兴趣可以去看看
相关地址: https://juejin.im/post/59bb864b5188257e7a427c09?utm_source=gold_browser_extension