给你的网站添加阿里巴巴Iconfont图标详细图文教程

前言

为了提升网站的视觉效果和用户体验，本文将为你提供一个详细的步骤，教你如何将阿里巴巴的 Iconfont 图标集成到你的网站中。通过简单的操作，你可以轻松使用数百万个免费图标，为站点增添更多美观的元素。

部署教程

Iconfont 支持使用 GitHub 账号登录，登录后你可以轻松浏览并选择所需的图标，快速找到符合需求的矢量图标。

1.首先，浏览并找到你需要的图标，点击“添加到我的图标库”按钮，将其加入你的图标库中。

2.接着，点击右上方的购物车图标，然后选择“添加至项目”选项，将图标添加到你的项目中。

3.添加完成后，页面会自动跳转到“我的项目”页面。如果没有自动转入，请点击页面上方菜单中的“资源管理”，然后选择“我的项目”查看已添加的图标。

网站集成

使用 Iconfont图标 图标官方也有详细的教程，同时官网提供三种集成方式：Unicode、class、Symbol。这三种集成方式各有优劣势，具体请查看官方教程

这里我推荐使用 Symbol 的方式集成到网站中，当然你也可以按照官方的教程使用其它方式集成

第一步：将刚刚新建的项目生成 Symbol 接入链接，并复制

第二步：将代码保存到主题设置

将以下代码中的链接替换为您刚刚复制的链接，将下方代码添加到你的网站，WordPress用户可以在后台自定义HTML。

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

简单吧！网站集成 Iconfont图标 就已经全部搞定了！接下来就是使用 Iconfont图标 了！

使用 Iconfont图标

使用之前先去给图标添加一些CSS样式（子比主题勿用）

<style type="text/css">
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

在已经添加到你项目中查找图标并复制图标代码，然后按照下面的格式替换href="#iconxxx"中的图标代码，将代码插入到你需要显示图标的地方！

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

还是按照在导航菜单中添加图标为例：

最后我们看看效果吧！