实现网页图标，你都有哪些招？

最新推荐文章于 2024-12-16 09:33:42 发布

Happy Joker

最新推荐文章于 2024-12-16 09:33:42 发布

阅读量795

点赞数

文章标签： sprite css svg 图标前端

本文链接：https://blog.youkuaiyun.com/csdn_kingboss/article/details/54710497

版权

1.前言

其实很早就听说有很多优秀灵活的网页小图标实现方案。为了方便赶时间，每次任务就用图片来实现，这样做每次都会准备两张图片，一张为激活前，一张为激活后。对除此之外的其他方式知之甚少。今天特地整理了一下，当作学习提升吧！

2.三种实现方式

sprite（雪碧图）

CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

使用sprite最重要的是理解css得到background属性

值描述 css版本
background 简写属性在一个声明中设置所有的背景属性 1
background-color 规定要使用的背景颜色 1
background-position 规定背景图像的位置 1
background-size 规定背景图片的尺寸 3
background-repeat 规定如何重复背景图像 1
background-origin 规定背景图片的定位区域 3
background-clip 规定背景的绘制区域 3
background-attachment 规定背景图像是否固定或随着页面的其余部分滚动 1
background-image 规定要使用的背景图像 1

最重要的是background-position属性，x和y坐标的设置需引起注意

值	描述	css版本
background	简写属性在一个声明中设置所有的背景属性	1
background-color	规定要使用的背景颜色	1
background-position	规定背景图像的位置	1
background-size	规定背景图片的尺寸	3
background-repeat	规定如何重复背景图像	1
background-origin	规定背景图片的定位区域	3
background-clip	规定背景的绘制区域	3
background-attachment	规定背景图像是否固定或随着页面的其余部分滚动	1
background-image	规定要使用的背景图像	1

svg（矢量图）

可缩放矢量图形，它是基于XML的语言，示例：

<svg xmlns="http://www.w3.org/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转换地址：Data Url Generator
```
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图标

Download icono.min.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>
```