工具: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;
}