icon 优化

这篇博客探讨了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
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值