您的位置：首页 > Web前端 > CSS

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

2017-01-24 21:31 190 查看

1.前言

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

2.三种实现方式

sprite（雪碧图）

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

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


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

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

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>

3.结束语

整理了这三者网站图标实现方式，其实在我们的网站建设中，需要综合性的考虑，有优有劣，最重要的是在体积、http请求和兼容性三方面进行权衡。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： sprite css svg 图标前端

相关文章推荐

新的分享

章节导航