字体图标使用

下载字体图标

1. 字体图标不需要我们来选择上传，我们了解即可。

2. 字体图标下载网址：iconfont-阿里巴巴矢量图标库

---

字体图标文件引入方式

本地引入字体图标文件

注意： 本地字体图标使用需要引入相关文件

1. 复制相关的文件，到 fonts文件夹里面。

2. 引入 css

<link rel="stylesheet" href="./fonts/iconfont.css">

线上引入字体图标文件

1. 在图标库复制网址后直接引入即可

  <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

字体图标引入方式

注意点：每种引入方式都需要加iconfont类名

使用类名引入字体图标（最常用）

我们多用一个标签来使用字体文件，用两个类名的方式使用。

<span class="iconfont icon-gouwuche"></span>

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标 。

• 第二个类名 icon-gouwuche， 告诉盒子使用哪个小图标。

使用unicode编码

也可以直接在标签内部放入一个编码

 <strong class='iconfont'> &#xe8ab; </strong>  

css 要指定当前标签的文字是字体图标，必须要声明。

 strong {
      font-family: 'iconfont';
}

使用伪元素字体图标

<div class="car iconfont">购物车</div>

这样写结构比较清晰

.car {
      width: 200px;
      height: 45px;
      border: 1px solid pink;
      text-align: center;
      line-height: 45px;
    }
.car::before {
    content: "\e63b";

}
.car::after {
    content: "\e686";
}

小结

字体图标的特点：加载速度快 兼容性好 灵活度高可以使用文字属性font修改样式

字体图标使用可以整体分为两大步骤：

1. 使用前引入css文件。

<link rel="stylesheet" href="./fonts/iconfont.css">

2. 调用方式

开发中最常用的是使用类名来调用。

<span class="iconfont icon-gouwuche"></span>