Nuxt中引入iconfont图标

  1. 首先进入 iconfont 的官网https://www.iconfont.cn/,选取自己想要的图标然后把它们下载到本地,这里我下载的都是svg格式文件。

  2. 点击 资源管理-我的项目 进入到“我的项目”页面,新建一个项目(如:homepage

  3. 然后把你下载的图标加入到项目里面

    上传后项目中就有图标啦

  4. 将选好的图标下载到本地
    下载

  5. 下载好的文件解压后如下所示:
    解压其中有几个是不需要的,比如demo_index.html、 demo.css

  6. 将需要的按照分类添加入项目中放入项目中fonts 里面放字体文件; css 文件夹里面放 css; 文件 js 文件夹里面放 js 文件

  7. 注意iconfont.css里的文件路径,要更改!!路径

  8. 在 nuxt.config.js 文件里添加配置

    css: [
      '@/assets/styles/iconfont.css'
    ],
    plugins: [
      // ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入
      { src: '@/assets/js/iconfont.js', ssr: false }
    ]

转载: https://blog.csdn.net/a1056244734/article/details/107850700

原文地址:https://www.cnblogs.com/Utopia-in-reality/p/14301225.html