前端 - 字体图标

工具：icoMoon，字体图标可以使用px控制大小，使用color改变颜色

1.点击icoMoon App

2.导入SVG图片

3.逐一勾选图片

 

4.生成字体

5.选择 Preferences，修改class前缀

6.下载字体文件

7.vue-cli项目使用字体图标

src目录下建立common/fonts存放字体图标文件（将下载的fonts文件夹复制到该文件夹下）

src目录下建立common/stylus，将下载的style.css文件复制到该文件夹下，并改名为icon.styl

需要修改icon.styl文件中url的引用路径，修改为../fonts

// index.styl
@import './mixin'
@import './base'
@import './icon'

// main.js
import 'common/stylus/index.styl'

// 
<i class="icon-keyboard_arrow_right"></i>

.icon-keyboard_arrow_right {
  font-size: 10px;
}