icon 优化

最新推荐文章于 2023-03-19 11:36:04 发布

原创最新推荐文章于 2023-03-19 11:36:04 发布 · 730 阅读

0 ·

CC 4.0 BY-SA版权

vue-js 专栏收录该内容

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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('woff'),/* chrome, firefox */
    url('iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */
}

2) 定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

3) 挑选相应图标并获取字体编码

<i class="iconfont">&#x33;</i>

二、font-class引用
1) 拷贝项目下面生成的fontclass代码

at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

2) 挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-xxx"></i>

三、symbol引用
1) 拷贝项目下面生成的symbol代码

引入 at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

2) 加入通用css代码

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3) 挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

1)与UI合作，在iconfont上新建项目，创建属于该项目的icon库
这里写图片描述
2)下载代码应用到你的项目中

按照该文件中的提示完成icon在项目中的应用
我使用的是font-class 方便我改动图片的颜色和大小
将该文件夹中的iconfont.css iconfont.svg iconfont.ttf iconfont.woff iconfont.eot拷贝到我的项目中
这里写图片描述
在需要使用该icon的地方引入该css