【Vue】前端项目引入阿里图标

【Vue&React】前端项目引入阿里图标

    • 1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;
    • 2、加入并进入到项目中去选择Font class 并下载到本地
    • 3、得到的文件夹如下
    • 4. 把红框中的部分粘贴到自己的项目中( static或assects文件目录下);
    • 5、在入口文件main.js内全局引入,注意引入路径要正确
    • 6. 项目中使用图标

1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;

在这里插入图片描述

2、加入并进入到项目中去选择Font class 并下载到本地

【Vue】前端项目引入阿里图标_第1张图片

3、得到的文件夹如下

【Vue】前端项目引入阿里图标_第2张图片

4. 把红框中的部分粘贴到自己的项目中( static或assects文件目录下);

【Vue】前端项目引入阿里图标_第3张图片

5、在入口文件main.js内全局引入,注意引入路径要正确

import './assets/icons/iconfont/iconfont.css'    // 引入阿里云字体图标css

6. 项目中使用图标

//注意:iconfont是固定的,icon-sousuokuang为图片红框部分
<i class="iconfont icon-sousuokuang" />

注意:iconfont是固定的,icon-sousuokuang为图片红框部分
【Vue】前端项目引入阿里图标_第4张图片
最后,如果帮到您
【Vue】前端项目引入阿里图标_第5张图片

你可能感兴趣的:(前端,笔记,前端)