小图标icon-fonts解决方案

• 老生常谈了，一般来说简单优化，可以选择使用精灵图，把多个icon放在一张图中，本来需要请求多次的图标请求一次就ok了。

• 本文介绍的是另一种方法，对于纯色的icon，可以把他们打包成字体文件（目前应该打包成两个文件，一个*.ttf，一个*.woff，woff格式相对较新，是专门针对web的格式，兼容性不高，但是整体大小比tff文件小40%左右，所以引入两个文件，如果打开项目的浏览器支持woff格式的字体，则自动引入woff），引入项目，一次请求就下载了全部项目用到的纯色icon，就woff来说，我项目中的woff，经过服务器压缩，最后只有179B（这里修正一个错误，貌似服务器并不能压缩字体文件，但是也不用担心，一个143个图标的woff文件只有不到15kb）。下面开始介绍具体制作和引入方法。

• 首先需要制作字体文件，在mac系统下，先下载一个软件叫Panda，图标是一个熊猫，然后找UI要svg矢量图（这个软件只能用svg生成字体文件），软件的使用很简单，首次使用点击下面三个tab中的第一个“拼合”，把svg拖入软件，点击生成，软件会在svg所在的文件夹生成一个demo文件夹，两个字体文件就生成到这个文件里了

  
  
  

  image.png

• 第二次添加图标的时候，点击软件下面三个tab中的第二个“修改”，把之前生成的ttf文件拖入软件，再拖入需要添加的svg，点击生成，就会更新“demo”文件夹中的字体文件了。

• 制作好了字体文件，进入第二步，比如把字体文件放入index.html同级的fonts文件夹中，推荐的做法是把字体图标的声明和定义样式全部抽离到一个文件中，再引入App.vue

• 字体编码可以在demo/demo.html中查看，比如第一个图标下面的编码为ခ，则对应的字体编码为\1001

/* 使用font-face声明字体 */
@font-face {
  font-family: 'iconfont';
  src: url('fonts/iconfont.woff?t=1510834658947') format('woff'), /* chrome, firefox */
       url('fonts/iconfont.ttf?t=1510834658947') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal
}

/* 定义使用iconfont的样式 */
[class^="icon-font-"] {
  font-family: "iconfont" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 挑选相应图标并获取字体编码，起个类名赋值给他的content */
i.icon-font-home:before {content: '\1001'}

• 定义好之后就可以在页面中使用了

整合elementUI

• 有的项目需要fork elementUI的样式文件，修改成自己项目的风格，我们也可以把图标整合进elementUI本身的字体文件中。先下载 elementUI的样式文件，解压之后把文件夹中的src文件夹改个名字theme，放入/src/element，再修改main.js之前引入的element样式文件路径为import './element/theme/index.scss'

• 然后重启项目，这时你可能会发现报错了！

This relative module was not found:
* ./element/theme/index.scss in ./src/main.js

• 居然说找不到模块，老子路径明明没错！莫慌，其实是你的项目解析不了scss文件，如果你使用的是webpack4.0+，只需要安装一下sass就解决了，连写配置都省了

// 在项目下，运行下列命令行
npm install --save-dev sass-loader
// 因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

• 下面就可以开始修改字体文件了，把UI给你的svg添加到elementUI的字体文件中，步骤参照上面说过的 第二次添加图标 ，把需要修改的/src/element/theme/fonts/element-icons.ttf拖入熊猫，添加svg后生成新的字体文件，并用新生成的字体文件改名后替换element原来的那两个字体文件

• 最后一步，在/src/element/theme/icon.scss中配置一下刚才导入的图标就可以用了
  注意：类名前缀必须是'.el-icon-'