vue-cli3 使用iconfont字体图标

将下载下来的压缩包解压到本地。绿色箭头的不需要,只需要红色和黄色方框内的。


找到Vue项目路径,在assets路径下新建文件夹Iconfont,将文件复制粘贴到项目里【命名看个人】


修改main.js:   import './assets/Iconfont/css/iconfont.css'(注意路径问题)【自行改为自己的iconfont.css路径】


修改文件路径:这四个文件都是绝对路径需要修改。


在iconfont.css里修改路径     !注意iconfont.woff我下载的iconfont.css中


最开始是上图,因此无法添加我想要的相对路径,网上有些图片是url(iconfont.woffXXXX)←这种样子的,可以直接设置相对路径,所以我直接将woff文件与CSS放在一起,这样是可以的。


改后的路径如上图↑

之后就可以直接调用了

类似这样:<i class="iconfont icon-mobilephone"></i>  

调用的图标可以在iconfont.css 中找到写法(如:icon-mobilephone 或者icon-edit等)


PS:如果遇到下图的问题:



解决方法:npm install css-loader --save


原文  https://blog.csdn.net/qq_34802010/article/details/81451278

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在项目几乎都会用到了矢量图标icon,我先来说说ionic官网icon图标,官网的图标使用起来很方便,直接用标签引...
    hk_sky阅读 2,850评论 0 2
  • 前提 准备好自己的字体图标,如果自己没法画出字体图标的(比如我) 可以到阿里公开图标库公开图标库 下载。 以下我们...
    木子李ao阅读 2,484评论 0 1
  • 第一步:项目根目录下 index.html,初始代码如下: 需要在 后面补上,minimum-scale=1.0,...
    V火力全开阅读 841评论 0 0
  • 方法一:简单粗暴 - 生成链接使用法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 点击购物...
    liwuwuzhi阅读 992评论 0 6
  • 众所周知, 小程序的有一个1M大小的限制. 而优美的界面离不了各种图形. 如果将这些图形集成到小程序中. 其臃肿的...
    achar阅读 5,436评论 0 10