使用阿里Iconfont轻松获取矢量图标的方法

阿里Iconfont是阿里巴巴提供的一个矢量图标管理平台，通过该平台，用户可以方便地获取和管理各种矢量图标。下面将详细介绍如何使用阿里Iconfont来获取矢量图标。

NO:1 使用教程

NO:1 注册并登录 首先，打开阿里Iconfont官网（www.iconfont.cn 并进行注册或登录。）

NO:2 选择并添加图标 在官网上，你可以浏览数千个图标。建议选择多色图标，因为它们更具视觉效果。将鼠标悬停在感兴趣的图标上，会出现几个选项，在其中点击购物车图标，将该图标添加入库。如果有多个图标需要添加，则需要一个一个的进行操作。

NO:3 进入购物车 在页面右上角找到购物车图标，并点击进入。购物车中显示了你添加的所有图标，右侧会弹出一个窗口。

NO:4 创建项目 在弹出窗口中，点击”添加至项目”按钮，并点击右侧的加号新建一个项目。输入项目名称（可以是中文），然后点击确定。

NO:5 生成链接 现在你已经进入了项目界面，在页面中找到”Symbol”选项，并点击进入。如果图标还没有生成链接，会显示红色字体”暂无代码，点此生成”，点击该文字即可生成链接。

NO:6 将链接放入头文件

NO:2 最后

是将生成的链接放入头文件中。以网站的主题根目录中的header.php文件为例，你可以将图标链接header在第最后一行或其他合适的位置。

使用以上步骤，你可以轻松地通过阿里Iconfont获取并管理矢量图标。这个方法方便且流行，在许多设计项目中都被广泛应用。希望这篇文章能够帮助到那些对如何使用阿里Iconfont感到困惑的同学们！

格式为

<script src="刚刚生成的连接"></script>

已本站为例

<script src="//at.alicdn.com/t/font_2696731_fbdj49dums.js"></script>

NO:3 将下列css样式放入 style.css文件中

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

NO:4 使用时格式为

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>

XXX为图标下方名称.

已本站为例(第一个图标店铺)格式为:

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianpu"></use></svg>