关于vue.js:vuecli创建的项目引入图标字体有坑

40次阅读

共计 409 个字符,预计需要花费 2 分钟才能阅读完成。

第一步:找须要的

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

第二步:增加

下载好解压进去,增加到我的项目文件夹中

第三步:援用

  1. 在路由文件中用 import '../../font/iconfont.css' 引入。
    我这里用 router 当作路由文件夹,所以 router 文件夹下的 index.js 就是路由文件,就没用 src 目录下的 main.js 当作路由文件
  2. 在要应用图标的页面中援用

    <i class="iconfont icon-zhuye"></i>
    <i class="iconfont icon-dingdan"></i>

    我这里就用了下面两行就行了,看有的办法要在 <style></style> 里写
    @import url("../../font/iconfont.css"); 不晓得是不是我的我的项目进行到前面就要用到

四、留神:肯定要在 <i></i> 的 class 中退出 iconfont

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

正文完
 0