小图标的使用（插入icon图标）

@xudongh 2016-07-14 12:06 字数 2180 阅读 2050

 

 

在网页中插入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：

 

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

HTML：

 

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

---

 

font + CSS

 

① 概述

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

 

②使用方法

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

CSS：

 

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

HTML：

 

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