icon 优化

最新推荐文章于 2022-08-04 01:51:19 发布

君如墨

最新推荐文章于 2022-08-04 01:51:19 发布

阅读量661

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/zhuswy/article/details/80223280

版权

这篇博客探讨了icon的演变，从img标签到image sprite，再到font-awesome和iconfont。重点介绍了如何使用iconfont，包括unicode、font-class和symbol三种引用方式，并分享了在项目中应用iconfont的步骤，尤其是使用font-class方便调整颜色和大小。

摘要由CSDN通过智能技术生成

icon 的演变史
1) img 标签
2) image sprite 通过css 的 background-position定位显示不同的 icon 图标说实话这个真的有点恶心每添加或者删除掉一个图标都需要UI从新处理该雪碧图也需要前端重新重新处理定位定位起来也很麻烦
3) font-awesome 这个我现在还在用比较麻烦的就是有时候项目需要的图标这个上边没有 so sad
4) iconfont 这个之前没用过可以学习一下
iconfont:
一、unicode
1) 拷贝项目下面生成的font-face

@font-face {
   font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
    url('iconfont.woff') format(&#