如何在vue项目中使用iconfont字体图标（自己上传svg生成iconfont）

一.登录阿里巴巴字体图标官网

iconfont-阿里巴巴矢量图标库

二.按照如下步骤操作

1.点击上方导航栏资源管理——我的项目——新建项目

 

2.填写新建项目表单

3.点击左侧刚创建的项目名称——上传图标至项目——选择本地svg文件上传——待审核通过点击去除颜色并提交按钮 

4.提交后点击"暂无代码，点此生成"，生成代码地址并复制 

 

三.项目中引入样式

方法1：复制上面链接打开后的样式代码，在项目中styles文件夹下新建icon.css并粘贴刚复制的样式代码，并引入（2种方式2选1）

（1）在index.css中引入icon.css (@import)

@import "./icon.css";

（2） 或者在项目中main.js中引入icon.css (import)

import "@/styles/icon.css"

方法2：直接在需要用到字体图标的页面的style中引入

注意：需要在复制的地址前面加上http:

<style lang="less" scoped> 
@import "http://at.alicdn.com/t/c/font_4153392_o81rmnxariq.css"; 
</style>

方法3：将字体图标文件下载到本地 

步骤1.点击下载至本地

步骤2：解压下载的字体图标文件，修改文件名为font，并将font文件夹复制到项目下的styles文件夹下

步骤3：在main.js中引入

import "@/styles/font/iconfont.css"

四.页面使用字体图标

   <div class="iconfont icon-shouye"></div>
   <div class="iconfont icon-fenxiang"></div>

五.效果展示

如图这样就配置成功啦

总结：一般项目中建议使用方法3将字体图标文件下载到本地