vue-cli创建的项目引入图标字体——有坑

第一步:找需要的

https://www.iconfont.cn/找到需要的图标下载到本地

vue-cli创建的项目引入图标字体——有坑_第1张图片

第二步:添加

下载好解压出来,添加到项目文件夹中
vue-cli创建的项目引入图标字体——有坑_第2张图片

第三步:引用

  1. 在路由文件中用import '../../font/iconfont.css'引入。
    我这里用router当作路由文件夹,所以router文件夹下的index.js就是路由文件,就没用src目录下的main.js当作路由文件
    vue-cli创建的项目引入图标字体——有坑_第3张图片
  2. 在要使用图标的页面中引用

    
    

    我这里就用了上面两行就行了,看有的方法要在里写
    @import url("../../font/iconfont.css");不知道是不是我的项目进行到后面就要用到
    vue-cli创建的项目引入图标字体——有坑_第4张图片

四、注意:一定要在的class中加入iconfont

(这是我踩的坑,小声bb)
image.png

你可能感兴趣的:(vue.js)