vue在线引入阿里矢量图标

最新推荐文章于 2022-08-23 13:06:13 发布

小宋i

最新推荐文章于 2022-08-23 13:06:13 发布

阅读量396

点赞数 2

文章标签： vue.js javascript 前端 html5 typescript

本文链接：https://blog.csdn.net/weixin_50641294/article/details/118027888

版权

vue在线引入阿里矢量图标

1.第一步：打开官网

在这里插入图片描述

第二步搜索图标：比如文件夹选择添加入库

在这里插入图片描述

第三步选择新建项目确认后进入项目

在这里插入图片描述

第四步点击暂无代码，点此生成

在这里插入图片描述

第五步复制代码，在app.vue style 中引入

在这里插入代码片自己加http:
@import 'http://at.alicdn.com/t/font_2618383_k0028yit71k.css';


<style>
@import 'http://at.alicdn.com/t/font_2618383_k0028yit71k.css';   //这里引入
body {
  background-color: #f7f9fa;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
</style>

第六步点击图标复制代码在想要使用的地方加入

在这里插入代码片 
<span class=" iconfont icon-wenjianjia"/>
 iconfont 必须加

最终就在页面显示出来了

在这里插入图片描述

在这里插入代码片
 <el-tree ref="vueTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"   node-key="id"  :default-expanded-keys="[1]"  :default-checked-keys="[2]" :highlight-current="true">
            <span slot-scope="{ node, data }" class="custom-tree-node">
             
              <span class="icon iconfont icon-wenjianjia"/>&nbsp;&nbsp;
              <span class="file-name">{{ data.label }}</span>
            </span>
         
          </el-tree>