一.登录阿里巴巴字体图标官网
二.按照如下步骤操作
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将字体图标文件下载到本地