实现⽹页图标，你都有哪些招？
1.前⾔
其实很早就听说有很多优秀灵活的⽹页⼩图标实现⽅案。为了⽅便赶时间，每次任务就⽤图⽚来实现，这样做每次都会准备两张图⽚，⼀张为激活前，⼀张为激活后。对除此之外的其他⽅式知之甚少。今天特地整理了⼀下，当作学习提升吧！
2.三种实现⽅式
sprite（雪碧图）
CSS雪碧 即CSS Sprite，也有⼈叫它CSS精灵，是⼀种CSS图像合并技术，该⽅法是将⼩图标和背景图像合并到⼀张图⽚上，然后利⽤css的背景定位来显⽰需要显⽰的图⽚部分
使⽤sprite最重要的是理解css得到background属性
值描述css版本
background简写属性在⼀个声明中设置所有的背景属性1
background-color规定要使⽤的背景颜⾊1
background-position规定背景图像的位置1svg矢量图导入ppt
background-size规定背景图⽚的尺⼨3
background-repeat规定如何重复背景图像1
background-origin规定背景图⽚的定位区域3
background-clip规定背景的绘制区域3
background-attachment规定背景图像是否固定或随着页⾯的其余部分滚动1
background-image规定要使⽤的背景图像1
最重要的是background-position属性，x和y坐标的设置需引起注意
svg（⽮量图）
可缩放⽮量图形，它是基于XML的语⾔，⽰例：
<svg xmlns="/2000/svg"version="1.1">
<circle cx="100"cy="50"r="40"stroke="black"
stroke-width="2"fill="red" />
</svg>
如何在html页⾯中引⽤呢？
将 SVG 作为图像导⼊
<img src="1.svg" alt="svg">
.mysvg { background-image: url("1.svg"); }
//其中1.svg就是svg的xml⽂件
将 SVG放⼊object对象 中导⼊
<object type="image/svg+xml" data="1.svg"class="mystyle"> My SVG </object>
//通过data引⼊1.svg图像，并且.myclass可以⾃定义svg样式
将 SVG 作为iframe导⼊
<iframe src="example.svg"class="myclass"></iframe>
//通过src引⼊1.svg的地址，并且.myclass可以⾃定义svg样式
将 SVG 作为⼀个data URI导⼊
The data URI scheme is a URI scheme that provides a way to include data in-line in web pages as if they were
external resources. This technique allows normally separate elements such as images and style sheets to be
fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient.
data url转换地址：
a.  <img src="data:image/svg+xml;base64,[data]>
b.  background: url(data:image/svg+xml;base64,[data]);
c.  <object type="image/svg+xml" data="data:image/svg+xml;base64,[data]>content</object>
使⽤内联 SVG
<body>
<svg width="300"height="200"class="mystyle">
<rect width="100%"height="100%"fill="green" />
</svg>
</body>
//其中1.svg就是svg的xml⽂件
css图标绘制
css图标，其实就是利⽤纯css绘制⽽成，其优越性可想⽽知，在性能和灵活性⽅⾯已经很不错了。当然制作css图标伤脑筋，并且已经有许多⼤⽜写了很多精制的图标，可以适当⽤在⾃⼰⽹页上。
ICONO就是⼀套精制的css图标
如何使⽤？
step1：引⼊icono.min.css⽂件
<link rel="stylesheet"href="icono.min.css">
step2：给标签添加对应class
<i class="icono-mail"></i>
<div class="icono-mail"></div>
<span class="icono-mail"></span>
<whatever class="icono-mail"></whatever>
3.结束语
整理了这三者⽹站图标实现⽅式，其实在我们的⽹站建设中，需要综合性的考虑，有优有劣，最重要的是在体积、http请求和兼容性三⽅⾯进⾏权衡。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。