精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）

CSS苦逼学习日记（6）

---

精灵图

1.精灵图是什么？：
把许多小图标都放在一个大图片上，这样利用小图标的时候只需要重复使用多次利用同一张大图片，减少加载各种图片路径的时间，减小程序（网页）的运行速率，带来更高更好的用户体验

2.精灵图如何起作用？：
因为许多小图片都放在一个大图片上，所以每个小图片都有自己所相对于大图片的x轴和y轴的坐标，默认的是x轴向右和x轴向下为正值，若要移动到相应的位置，（基本上都是负值）改变background-position的x，y值即可，简写为： background：url（精灵图路径） no-repeat（图片不重复）npx（n为把图片水平向右移动距离y轴为n的距离） mpx（m为把图片垂直向下移动距离x轴为m的距离），若为负值，则移动方向相反。

如下是王者荣耀官网所使用的精灵图之一：

推荐用来测量小图标相对位置的x与y坐标的软件：FIrework （免费，好用，简单）

---

字体图标

字体图标是什么？:
字体图标本质上是一种文字，但是表现形式是一个图片，每一个图片都有文字的全部特性，可以随意的改变颜色，产生阴影，增加透明效果，旋转等。
一个图标字体要比一系列的图形要小，一旦字体加载了，图标就会马上渲染。
兼容性好，几乎支持所有的浏览器，可以放心使用

下载字体图标的网站：

IcoMoon图标库（外国服务器可能比较慢）
阿里字体图标库

IcoMoon图标库使用方法：

1.点击你所需要的图标 箭头指向为你一共选了多少个图标

2.点击selection旁边的 Generate Font ，并点击下方的 download 即可下载图标

3.解压资源包到你你想它所储存的地方

4.将解压资源包里面的fonts文件夹复制一份，粘贴到你与你css文件相同的目录之下：

5.打开下载的压缩包内的style.css , 复制以下内容：

6.将此内容复制到你自己的css样式内部：

7.用浏览器打开下载的资源包内的demo.html 复制所需要的用到的图标下面的代号（图标的表示形式），如果某个模块需要使用则复制上去，记住
需要给模块加一个font-family: "icomoon"

8若为伪元素，则在content内加 \（转义字符）和demo.html中复制的图标代号

9.若为普通标签内元素，则先给此标签加 font-familt:“icomoon” ,再在两个标签之间加 +图标代号 如上图 \904

大功告成即可显示字体图标

总结

1.遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式比较复杂的小图片，就用精灵图