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

香菜啵子欸

已于 2024-01-31 16:29:03 修改

阅读量935

点赞数 13

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签：前端

于 2024-01-30 10:30:53 首次发布

16 篇文章

订阅专栏

本文详细介绍了在Vue和React前端项目中通过两种方式引入和使用阿里图标库（iconfont）的方法，包括下载本地文件和通过HTML链接的方式，并提醒开发者注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式1

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

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

注意：iconfont是固定的，icon-sousuokuang为图片红框部分
在这里插入图片描述

在这里插入图片描述

重点注意！！！记得先点击更新代码再点击复制获取得到链接，在开发中，有一个坑，有些同学中途在图标项目中添加了新的图标，然后没有及时更新获取链接，导致使用新图标时不显示。

  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4104784_spsvimhs68q.css" />

//引入图标组件,注意路径
 <i class="iconfont icon-ceshi"></i>

注意：你的class名字iconfont 为固定 icon-ceshi为图片红框部分
在这里插入图片描述

最后，如果帮到您
在这里插入图片描述