二十一、CSS3 之使用字体图标丰富网页效果和呈现方式（1）

字体图标

字体图标我们可以用 阿里巴巴矢量图标库 ，网址：iconfont-阿里巴巴矢量图标库

字体图标该如何使用

（1）将字体图标下载到本地

首先将字体图标下载到本地，下载字体包之前，如果没有账号的话，可以先注册一个账号，然后登录，也可以选择新浪微博快捷登录。

登录到图标库后，以 ICON 图标库 为例，点击进去，选择需要的图标

这里以 官方图标库 下的第一个为例，点击下面任意图标，会跳转界面

在跳转过来的界面，选择需要的图标，鼠标放上去，会有一个弹出框，选择 添加入库 ，就可以把选择的图标加入到购物车

点击右上侧的购物车，在网页的右边会弹出一个框，这个框里放着之前选择的图标，然后点击下方的 添加至项目 ，在最底下创建项目，点击确定后，跳转至 我的项目 界面

在 我的项目 界面，选择 下载至本地

（2）解压下载的压缩文件，找到 `demo_index.html` ，双击打开

在 Demo 页面，可以看到刚才加入购物车的图标，在使用的时候，可以使用 Unicode 编码表示，也可以用类名表示，每种表示方式，下面都注明了它的使用方式

（3）使用示例

将下载好的素材，重命名后（当然也可以不重命名）放在项目根目录

在使用之前，先要引入它的 样式表

然后复制粘贴图标对应的 Unicode 编码，任意放一个标签包裹，使用时注意一定要在对应标签上加 class = " iconfont " ，不然不生效。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
  </head>
  <body>
    <span class="iconfont">&#xe61d;</span>
  </body>
</html>

"iconfont" 是你项目下的 font-family ，可以通过代码查看，默认是 "iconfont"，也可以自己修改别的名字，但一般情况下建议直接使用就行，修改之后要是忘记，调试出错的话不容易排查：

也可以根据自己的需要，设置样式：

大多数情况下更习惯用类名

通常更习惯使用类名来实现，因为类名相比于 Unicode 语意更明确，书写也更直观，可以让人很容易分辨出来这个 icon 是什么。

使用 class 来定义图标时，如果需要 替换图标 ，只需修改 class 里面的图标类名即可。

首先，也是要引入它的 CCS 样式，然后调用图标对应的类名，但这个类名，必须要调用两个，一个是 iconfont 类 ，它是基本样式，包含字体的使用等；还有一个是 icon-xx ，它对应的是图标，修改它，就可以修改图标

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .icon-xihuan {
        font-size: 60px;
        color: red;
      }
    </style>
  </head>
  <body>
    <span class="iconfont icon-xihuan" ></span>
  </body>
</html>