Iconfont 阿里巴巴图标库使用

最开始写网站的时候使用的图标是 Font Awesome,个人感觉有点复杂,于是在 18 年的时候将图片资源切换为 Iconfont 阿里巴巴矢量图标库 了,点击这里 进入,在此记录一下使用方法。

直接下载使用

直接到网站搜索想要的图标,点击下载,选择自己想要的格式进行下载使用即可,支持 SVG 下载AI 下载PNG 下载直接复制 SVG 四种方式。

这种方式使用比较麻烦,推荐在只需要一两个且不需要维护的时候使用

加入项目使用

这种方式是普遍使用的方式,我自己也在使用这种方式,比较方便。

加入项目

  1. 找到自己需要的图标,选择 添加入库

  1. 点击右上角的购物车图标打开侧栏,选择 添加至项目 ,这时可以选择已有的项目或者新建一个项目,点击确定即可

unicode 引用

unicode 是字体在网页端最原始的应用方式,由于使用的是字体,所以不支持多色,只有单色,能够通过样式 color 控制。

  1. 复制项目中生成的 Unicode 代码,添加到网站的样式表文件中

  1. 定义使用 iconfont 的样式
.iconfont {
    font-family: "iconfont";
    font-size: //customize
    font-style: normal;
    ...
}
  1. 复制图标代码添加到页面中
<i class="iconfont">&#xe676;</i>

font-class 引用

font-classunicode 差不多,相比前者,后者有比较明确的语意。

  1. 复制生成的代码,使用 link 标签添加到 <head> 标签中

<link rel="stylesheet" href="https://at.alicdn.com/t/font_1625713_8m9p8u5t04r.css">
  1. 获取图标类名,添加到页面中

<i class="iconfont icon-dark"></i>

可对图标进行编辑,修改成自己想要的名称,然后更新代码即可

symbol 引用

这是一种全新的使用方法,支持多色图标,其是做了一个 svg 的集合,浏览器渲染一般。

  1. 同样拷贝 symble 生成的代码,通过 script 标签添加进页面中

<script src="//at.alicdn.com/t/font_1625713_8m9p8u5t04r.js"></script>
  1. 加入通用的 css 代码
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
}
  1. 获取图标类名,添加到页面
<svg class="icon" aria-hidden="true">
	<use xlink:href="#icon-xxx"></use>
</svg>

我个人目前比较喜欢使用 font-class ,本站采用的也是这种方式,不过以后的趋势应该是向 symbol 发展,喜欢的不妨试试。

如果觉得这篇文章不错,不妨

微信打赏 微信打赏
支付宝打赏 支付宝打赏
编写自己的 Hexo 主题
单链表面试题 - 找到中间结点