字体图标icomoon的用法

一、字体图标的产生

有很多优点：

1. 字体图标比图像要小，一旦加载字体，图标会立马渲染出来，减少了服务器请求
2. 本质是文字，放大缩小，都不会失真。可以随意设置颜色，阴影、透明效果、外边距、旋转之类的属性。

3. 几乎兼容所有浏览器，可放心使用

4. 如果遇到结构样式简单的小图标，就用字体图标

5. 如果遇到结构和样式复杂的小图标，就用精灵图 

二、字体图标的下载：

http://www.icomoon.io

http://www.iconfont.cn/

 

三、字体图标的使用

下载完成后，得到一个icomoon压缩文件，这个压缩文件一直留着，千万不要删除。 方便后面追加字体图标。

1、解压缩后，将fonts文件夹放到页面的根目录下【fonts文件夹下四种格式的文件，为的是兼容不同的浏览器】vue中我是放在assets文件夹下面

2、把字体文件通过css的方式，引入到页面中【注意路径，vue中我用的相对路径】

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?dadtdc');
  src:  url('fonts/icomoon.eot?dadtdc#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?dadtdc') format('truetype'),
    url('fonts/icomoon.woff?dadtdc') format('woff'),
    url('fonts/icomoon.svg?dadtdc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

这一段，可以去到icomoon解压缩文件下，style.css最上面那部分， 复制过来即可。

四、字体图标的追加

 

 

 上传以后，我们以前选中的图标会在选中的列表里面，需要增加新的，可以继续勾选，最后下载下来，重复之前的步骤，替换一下fonts文件夹即可。

五、字体图标的加载原理

 当浏览器第一次请求字体图标时，服务器会把拿到的四个字体文件全都返回过来，后续再用到字体图标，我们就不需要再向服务器发请求了，跟精灵图原理类似。