1 栅格图片
直接使用图片作为图标当然是可以的,有用起来简单,兼容性好等优点。但是 1202 年了,这样的前端确实有点跟不上时代了。
- 文本中布局不方便
- 图片放大会有失真的问题
- 图片需要路径,使用起来不太优雅
- 图片多的时候,请求数会多一点
- 不方便修改颜色
等等缺点,虽然 HTTP/2 改善了请求数啥的,还是问题多多,已经不推荐了。
2 使用 CSS 来直接绘制
首先用 css 来实现是一种非常节约资源的方式。 我们来看个例子
<div class="close icon"></div>
.close.icon {
color: #000;
position: absolute;
margin-top: 0;
margin-left: 0;
width: 21px;
height: 21px;
}
.close.icon:before {
content: '';
position: absolute;
top: 10px;
width: 21px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.close.icon:after {
content: '';
position: absolute;
top: 10px;
width: 21px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
这样就完成了一个 关闭 icon 确实可以,你要是特别喜欢这种语法,那可以去这个网站去看看
cssicon.space/
- 大佬专用,一般人切勿尝试
- 非常灵活,可维护性极差,容易被同事打
- 图标大小位置与颜色也不方便控制
3 使用矢量字体(推荐)
这是非常好用的一种方式,极力推荐每个前端使用,我们来查看一个例子
@font-face {
font-family: 'iconfont'; /* project id 1036637 */
src: url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.eot');
src: url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.woff') format('woff'),
url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.svg#iconfont') format('svg');
}
使用起来
.icon {
font-family:'iconfont',
font-size:16px;
}
.icon-demo::before{
content:"";
color:red;
}
这里推荐个网站 www.iconfont.cn 阿里巴巴矢量图标库
借助这个网站,可以方便的使用将图标管理起来。
可以在线生成对应的css 文件 只需要引用下,就可以直接通过类名可以来使用 甚至可以生成对应的js 来实现下面说到的svg精灵图的效果。
- 可以设置大小颜色,放大不会失真
- 兼容性好,大部分浏览器小程序都可以兼容
- 方便管理与共享
4 雪碧图
基本可以算已经过时的一种产物了,1202年前端新项目还用雪碧图的话,可以算是守旧的典范了。 简单来介绍下雪碧图,就是把大量的图不叠加的拼接在一张图上,通过css属性的偏移来实现显示局部图片的效果。
- 修改麻烦,一张图改了就需要重新生成
- 放大容易失真,颜色也不方便设置
- css动效基本无缘,无法面向未来
- 确实能节约http请求,但相比于新增的维护性,不值一提
5 SVG图片
是一种比较理想的方式,放大也不容易失真,就是文件较大,有很多冗余信息。简单总结下
- 渲染成本比较高
- 可以设置多色
- 放大缩小不容易失真,矢量
- 其他和图片差不多
这个其实是挺好的技术,用的不多的原因很简单,现在的页面图标单色的比较多,拟物的时代过去了,哪天拟物图标又火起来的时候,用的人自然就多了。
6 使用canvas直接绘制
杀鸡用牛刀的典范,绘制个图标而已,这里不推荐大家使用,只是提供个思路。 对SVG转canvas感兴趣的推荐个框架 小程序的框架,感兴趣的同学可以去了解下。
7 SVG 精灵图
类似之前的雪碧图,最大的差别是一个svg中多个symbol,通过id,或者说传入的标识符决定显示的哪个symbol 用法是这样的
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
- 渲染成本比较高 还不如png
- 可以设置多色
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式
- 兼容性较差,支持 ie9+,及现代浏览器
- 放大缩小不易失真
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!