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

前端开发

三种方法

1. CSS Sprite
2. font + HTML
3. font + CSS

CSS Sprite

① 概述

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

② 特点

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

③ 使用方法

用到的知识点主要为：

• background-image
• background-position

font + HTML

① 概述

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

② 为什么使用icon字体图标

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

③开源的icon字体图标网站

• http://fontawesome.io/
• https://icomoon.io/
• http://www.bootcss.com/p/font-awesome/
• http://unicode-table.com/cn/
• https://design.google.com/icons/
• 如何自制字体图标：http://flowerboys.cn/font/article/fontsarticle/how-to-turn-your-icons-into-a-web-font.html

④字体文件格式

• 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：

<!-- 将icon图标输出时，需要在icon的16进制编码前加上&#x -->
<i class="icon example">&#xf048;</i>

font + CSS

① 概述

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

②使用方法

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

CSS：

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

HTML：

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

总结