锐客网

  1. 首页 > it技术 > >

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

第一步：找需要的 【vue-cli创建的项目引入图标字体——有坑】去https://www.iconfont.cn/找到需要的图标下载到本地
vue-cli创建的项目引入图标字体——有坑
文章图片

第二步：添加 下载好解压出来，添加到项目文件夹中
vue-cli创建的项目引入图标字体——有坑
文章图片

第三步：引用

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

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

四、注意：一定要在的class中加入iconfont （这是我踩的坑，小声bb）
vue-cli创建的项目引入图标字体——有坑
文章图片

    推荐阅读


    上一篇：「Spring认证」Spring Hello World 项目示例

    下一篇：LiteFlow|LiteFlow 2.6.0版本发行注记，项目逻辑解耦的利器