字体图标的使用

方法一： 通过下载字体图标的字进行引用（最基本的方法）

1.在字体图标库中下载自己需要的字体图标（通常在iconfont-阿里巴巴矢量图标库下载）

2.在自己项目中新建一个fonts的文件夹，然后下载后解压下载的文件将下面的四个文件加入到fonts文件夹

 

3.引入CS

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

使用类名进行引用字体图标（常用）

一般如果是一个标签使用字体文件，采用两个类名进行命名（开发中常用）

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

• 第一个类名`iconfont` 目的提示这个标签就是一个字体图标，不是普通结构标签
• 第二个类名`icon-map`  目的提示这个图标的名称

 使用Unicode编码进行引入字体图标（了解）

<span>&#xe60d</span>;

这里面的Unicode编码可以从的文件中的下面网页中iconfont-阿里巴巴矢量图标库获取

 在这个引用方法中我们需要在css中对该标签的文字进行声明，这个过程是必不可少的

span{
	font-family: 'iconfont';
}

使用伪类的方式进行引入（了解）

<div class="user_log">用户登录</div>

这个方法可以让结构更清楚，因为减少了盒子模型的使用

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

}
.user_log::after {
    content: "";
}

        注意：

​                使用伪类进行引入的过程也是必须进行声明；

​                改变字体图像的样式是在伪类中进行设置

方法二：在线引入字体图像（目前开发中最常用）

在字体库中引用，以https://www.iconfont.cn/中的创建项目为例进行说明

1. 在这个之前需要创建一个账号从而可以创建自己的字体库，创建完成后我们可以在项目中获得引用代码的链接，点击查看在线链接获取链接  

2. 引入线上地址 

   获得的地址一般是这样的格式

   //at.alicdn.com/t/c/font_3600207_zfk461u6opn.css

   我们需要将其进行完善以此方便访问，如下

   http://at.alicdn.com/t/c/font_3600207_zfk461u6opn.css

    

3. 调用字体图像

• 开发中常用类名进行调用

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