在HTML种引用阿里巴巴iconfont字体图标
概述
什么是阿里巴巴iconfont字体图标呢？
iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制。
以前要引用各种图标需要使用的是图标图片，而使用图片需要向服务器请求图片资源，如果有请求次数非常多而用户量又很大那么会很麻烦，造成很多问题，而使用iconfont字体图标，即跟HTML加载一样，减少请求次数，缓解服务器压力。
在国内的阿里巴巴iconfont字体图标网站有很多免费可用的字体图标，下载代码即可使用。
下载
首先需要注册一个账号，在阿里巴巴矢量图标库，也可以使用微博、GitHub账号登录。
登录成功后，可以在首页搜索你要寻找的字体图标名称，在这里搜索的是“首页”
搜索成功后，把鼠标放在你要使用的图标上
然后将其加入到库
点击购物车，查看添加的图标
然后下载代码
下载成功后是一个压缩包，将其解压
打开其中的demo_index.html文件可以看到字体图标的使用教程。
| 引用方式 | 特点 | 使用步骤 |
|
Unicode 引用 |
|
第一步：拷贝项目下面生成的 第二步：定义使用 iconfont 的样式； 第三步：挑选相应图标并获取字体编码，应用于页面。 |
|
font-class 引用 |
|
第一步：引入项目下面生成的 fontclass 代码； 第二步：挑选相应图标并获取类名，应用于页面。 |
|
Symbol 引用 |
|
第一步：引入项目下面生成的 symbol 代码； 第二步：加入通用 CSS 代码（引入一次就行）； 第三步：挑选相应图标并获取类名，应用于页面。 |
具体使用参考下载下来的demo示例。
使用
Unicode 引用
第一步：间下载下来的所有文件全部复制到所要使用的文件夹下。（demo文件可以不用）
第二步：将图片中要求的代码复制到style标签下，可以引用iconfont.css。
第三步：在HTML中的body标签内要使用到图标的地方引用图标。
效果如下：
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
</body>
</html>
也可以使用引用iconfont.css的方式，代码更少更方便。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="iconfont.css" />
</head>
<body>
<span class="iconfont"></span>
</body>
</html>
font-class引用
第一步：引入iconfont.css文件。
第二步是选择相应图标的类名应用于页面。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="iconfont.css" />
</head>
<body>
<span class="iconfont icon-shouye"></span>
</body>
</html>
symbol引用
阿里平台推荐引用。
第一步：引入iconfont.js文件
第二步：加入通用的CSS代码
第三步：选择合适的图标名应用于页面。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入iconfont.js -->
<script src="iconfont.js"></script>
<!-- 引入CSS代码，引入一次即可 -->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 首页图标 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg>
</body>
</html>