在网页中制作icon图标

标签：

用字体在网页中画icon图标

第一步：获取字体资源
IconMoon网站
https://icomoon.io

iconMoon中有很多免费小图标可用，还能设置下载图标的使用属性（通过网站中设立的按钮preferences来设置）。
它有“Use i”使用<i>标签来画图标；“Use Attribute Selectors”使用属性选择器；“Use a Class”使用class属性。

使用<i>标签时，会将font-family等字体值赋值给所有<i>标签。
使用属性选择器时，会将font-family等字体值赋值给[class^="icon-"],[class*=" icon-"]
使用class属性，会将font-family等字体值赋值给.icon

无论使用以上哪种方式，都要先用@font-face引入字体。

第二步：选择制作方式

方式1：CSS Sprite

也叫CSS精灵，是一项使用背景图片定位，在网页中画icon图标的技术。

它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫“图片拼合”技术。

1、好处：减少文件体积和服务器请次数，从而提高效率。

2、坏处：你需要预先确定好每个图标的大小及图标间的间距，且图标的样式不能再改变

3、图片：需要将图片保存为PNG-24的文件格式。

4、原理：

其实就是将所有的小图片做在一张图中，然后在每个<li>标签中都导入这张图作为背景图，然后使用background-position对图片进行定位（注意，在每个html元素中，背景图片都是从左上角开始显示的，显示不了的地方会被自动隐藏），定位到需要显示的图标位置，超出<li>标签宽高的部分就隐藏。 需要设置background-image和background-position的属性。

5、一般写法：

1 background-image:url(images/bgimage.gif);
2 background-position: 0 -80px;

(0是left的值，-80px是top的值，也就是图片向上隐藏了80px。这两个值可以自己根据需要小图标显示的位置而设立，可以取负值)

方式2：font字体 + HTML
使用字体库以文本形式在网页中画小图标，可用CSS控制其样式

1、优点：
（1）灵活性：轻松地改变其他CSS效果或使用color值改变图标的颜色
（2）可扩展：使用font-size可轻松改变图标大小
（3）图标是矢量的，缩放图标不会影响清晰度
（4）兼容性：字体图标支持所有一般写法：现代浏览器（包括糟糕的IE6）
（5）本地使用：通过添加制定字体到本地系统，可以再不同的设计和编辑应用程序中使用它们

2、一般写法：

 1 @font-face{
 2 font-family: "imooc-icon";
 3 src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
 4 
 5 /*.eot?#iefix是兼容IE6-IE8*/
 6 src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
 7 ,url("../fonts/icomoon.woff") format("woff")
 8 ,url("../fonts/icomoon.ttf") format("truetype")
 9 ,url("../fonts/icomoon.svg") format("svg");
10 font-weight: normal;
11 font-style: normal;
12 }
13 
14 /*用于图标抗锯齿，光滑显示，写在所有图标元素的公共类里面*/
15 -webkit-font-smoothing: antialiased;
16 -moz-osx-font-smoothing: grayscale;

1 <!--html中的写法-->
2 <li><a href=""><i style="color: #efe0ce;" class="imooc-icon">&#xf048;</i></a></li>

3、写法说明：
<li>标签中的如&#xf048;这样的值是16进制数值，是每个icon小图标显示的时候的默认代码。刚开始得到的是f048;这样的值，需要自己加上&#x，浏览器才能识别。
注意有些字体库不是这样使用的，有些是用class属性来决定要显示的是哪个图标，而不是使用16进制数值。

方式3：font字体 + CSS

1、用@font-face引入字体，写法与方式2的相同

2、使用CSS内容：

before伪元素或者after伪元素
伪元素的content属性

*伪元素：创建一个虚假的元素，并插入到目标元素内容之前
  语法： 固定元素:伪元素{}
　　　　固定类:伪元素{}

3、插入的内容由content属性来制定。

1 /*这里的.icon-music的class名称是可以随意起的，只需把名称复制粘贴到html代码中就行*/
2 .icon-music:before{
3 /*这里的16进制数值是代表小图标的内容。
4 在16进制的值前面，加上反斜线"\"进行转义*/
5 content: "\e605";
6 }

总结：三种方法对比

CSS sprite 兼容所有主流浏览器低版本

font+HTML 兼容所有主流浏览器低版本

font+css 不支持低版本浏览器

【参考资料】

慕课网   http://www.imooc.com/learn/243

特别鸣谢慕课网的至尊玉老师!

在网页中制作icon图标

标签：

原文地址：http://www.cnblogs.com/yueyishanchen/p/iconp.html