零基础入门：在VSCode中正确引入阿里巴巴矢量图标库的完整流程-CSDN博客

本文链接：https://blog.csdn.net/2401_83607690/article/details/147668449

在浏览器中我们经常会看到一些图标比如🔍，本文将讲解如何获取这些图标元素，如何正确的将其导入VSCode以及如何设置这些元素的属性

‌一、准备工作‌

‌访问阿里巴巴图标库‌
打开官网：iconfont-阿里巴巴矢量图标库 → 注册/登录账号。
‌创建图标项目‌
- 点击右上角 ‌“资源管理” → “我的项目” → “新建项目”‌
- 输入项目名称（如 my-project），方便后续管理。

‌二、添加图标到项目‌

‌搜索并选择图标‌
- 在图标库搜索需要的图标（如“首页”）。
- 点击图标上的 ‌“购物车”图标‌ 添加到暂存区。
‌将图标加入项目‌
- 点击页面右上角 ‌“购物车”图标‌ → ‌“添加至项目”‌ → 选择刚创建的项目。

‌三、下载图标文件到本地‌

‌进入项目页面‌
- 点击右上角 ‌“资源管理” → “我的项目”‌ → 找到你的项目并进入。
‌下载图标文件‌
- 点击 ‌“下载至本地”‌ → 得到一个压缩包（如 iconfont.zip）。

‌解压文件

解压后得到以下文件（关键文件已标注⭐️）：

iconfont
├── demo.html        ⭐️ 图标使用演示
├── iconfont.css     ⭐️ 核心样式文件
├── iconfont.json    ⭐️ 图标元数据
├── iconfont.ttf
├── iconfont.woff
└── iconfont.woff2

‌四、将图标文件放入项目‌

在vscode中定位项目目录

假设你的项目目录结构如下：

my-project/
├── src/
│   ├── assets/
│   │   └── iconfont/   ⭐️ 将解压后的文件夹放在这里
├── index.html
└── styles/

复制文件

将解压后的 iconfont 文件夹复制到 src/assets/ 目录下。

‌五、在项目中引入图标‌

‌方法1：在HTML中引入

<!-- 在 <head> 中引入 iconfont.css -->
<link rel="stylesheet" href="./src/assets/iconfont/iconfont.css">

‌方法2：在CSS/SCSS中引入（推荐）

‌方法2：在CSS/SCSS中引入（推荐）

‌六、使用图标‌

‌1. Unicode方式（直接使用字体编码）

<span class="iconfont">&#xe600;</span>  <!-- 编码参考 demo.html -->

‌2. 类名方式（通过 CSS 类名）

<i class="iconfont icon-home"></i>  <!-- "icon-home" 替换为你的图标类名 -->

图标类名可在 iconfont.css 或官网项目页面的“复制代码”中查看。

‌七、调整字体路径（重要！）‌

如果图标不显示，可能是字体路径错误。
打开 iconfont.css，修改 @font-face 中的路径：

@font-face {
  font-family: "iconfont";
  src: url('./iconfont.woff2?t=123456') format('woff2'),  /* 确保路径正确 */
       url('./iconfont.woff?t=123456') format('woff');
}

如果文件在子目录，路径改为 ../assets/iconfont/iconfont.woff2

‌八、自定义图标样式

.iconfont {
  font-size: 24px;      /* 调整大小 */
  color: #ff0000;       /* 修改颜色 */
  margin-right: 10px;   /* 添加间距 */
}

‌九、常见问题‌

‌图标不显示？‌
- 检查字体路径是否正确。
- 确认已添加 iconfont 基类。
- 清除浏览器缓存。
‌如何更新图标？‌
- 在官网项目页面新增图标 → 重新下载 → 替换本地文件。

‌十、注意事项‌

保持图标库项目同步，避免本地文件与线上不一致。
不要删除阿里巴巴图标库中的项目，否则可能导致链接失效。

通过以上步骤，你可以轻松在项目中引入阿里巴巴矢量图标！建议保存本文并实践操作，如有问题欢迎评论区交流！

感谢文章指导：没事多睡觉666