在网页中插入icon图标的方法总结

前端开发

三种方法

CSS Sprite
font + HTML
font + CSS

CSS Sprite

① 概述

CSS Sprite也称为“CSS 雪碧”或者“CSS 精灵”。它是把网页中一些零星背景图片定位到要显示的位置，因此也叫“图片拼合”技术。

② 特点

相对单个小图标，可以节省文件体积和服务器请求次数，从而提高效率。
一般情况下，需要将文件保存为PNG-24的文件格式，因为相对于PNG-8，PNG-24不会出现毛边。
可以设计出丰富多彩的颜色图标。
需要预先确定每个小图片的大小。
注意小图标与小图标之间的距离。

③ 使用方法

用到的知识点主要为：

background-image
background-position

font + HTML

① 概述

使用字体用HTML代码以文本的形式直接在网页中画icon小图标。

② 为什么使用icon字体图标

使用图标字体可大大减少图标维护工作量。
1. 灵活性：轻松地改变图标的颜色或其他CSS效果。
2. 可扩展性：改变图标的大小，就像改变字体大小一样容易。
3. 矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。
4. 兼容性：字体图标支持所有现代浏览器（包括糟糕的IE6）。
5. 本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序中使用它们。

③开源的icon字体图标网站

④字体文件格式

EOT(Embedded OpenType Fonts)：微软开发的用于嵌入网页中的字体，IE专用字体。
WOFF(The Web Open Font Format)：Web字体中最佳格式，是一个开放的TrueType/OpenType的压缩版本，2009年被开发，如今被W3C组织推荐标准。
TTF(TrueType Fonts)：1980s，由Microsoft和Apple联合开发的一套字体标准，是Mac OS和WIN操作系统中最常见的一种字体。
SVG(SVG Fonts)：用于SVG字体渲染的一种格式，是由W3C制定的开放标准的图形格式。

由于浏览器对字体支持程度不一样，为了在所有浏览器都显示字体图标，我们必须同时引入这些字体文件。

⑤ 使用方法

主要用到@font-face属性。
CSS：

@font-face{
font-face:"family-name"; /*自定义字体名称*/
src:url("../font/XXX.eot"); /*解决IE9兼容模式下的兼容性问题*/
src:url("../font/XXX.eot?") format("embedded-opentype"), /*在eot加?或者?iefix，以解决字体文件在IE下加载失败的问题*/
url("../font/XXX.woff") format("woff"),
url("../font/XXX.ttf") format("trueytype"),
url("../font/XXX.syg") format("svg");
font-weight:normal; /*定义字体粗细*/
font-style:normal; /*定义字体样式*/
｝
.icon｛ /*按照一般的字体来写样式即可*/
font-family:"family-icon";
font-style:normal;
font-weight:normal;
font-size:20px;
-webkit-font-smoothing:antialiased; /*用于webkit引擎中的字体抗锯齿属性*/
-moz-osx-font-smoothing:graycale /*用于Mac OS系统和火狐浏览器中的字体抗锯齿属性*/
｝
.example{
color:#fff; /*可轻松改变图标颜色*/
font-size:24px; /*改变图标的大小*/
}

HTML：


<i class="icon example"></i>

font + CSS

① 概述

将icon图标对应的HTML代码通过CSS属性写入样式文件，然后调用样式名称即可。

②使用方法

主要使用:before伪元素、after伪元素、content属性

CSS：

/*@font-face属性、.icon样式与上面方法无异*/
.example:before{
content:"f048" /*需要在16进制编码前加上进行转译*/
}

HTML：

<i class="icon example"></i>