VUE项目中iconfont入门
VUE项目中iconfont入门
在项目中使用iconfont进行图标管理。
iconfont引用
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
- 进入iconfont账号 ,进入阿里巴巴矢量图标库注册账号;
- 查找所需要的图标 将需要的图标加入购物车 ,去购物车将图标添加至项目,便于管理;
- 在购物车将图标压缩包下载到本地 后进行解压;
- 将解压后的文件选择所需要的放到项目文件夹中,如果解压文件内部有文件路径发生改变,注意在iconfont.css中进行路径修改 ;
- 增在main.js中引用iconfont.css ;
- 在 项目中根据图标编码 引用图标。
iconfont图标显示小方框
- 引用图标中需要在类名中加入iconfont;
- 可以在iconfont基础上增加一个专属类名。
替换:Ctrl/Command + G
iconfont图标无法改变大小
- 使用font-size修改图标大小;
- 注意样式覆盖问题,在这里写入script中的样式会被main.js中引用的iconfont.js中的样式所覆盖,所以这里提供两个选择:(1)删去iconfont.js中的font-size样式设置;(2)把需要的font-sise写为标签style中,即内联样式。