使用字体图标的4种方法

无论用哪种方法，首先都得引入文件

线下本地字体图标：下载好包后

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

2. 引入 css

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

线上地址生成后，引入地址即可

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

重点：生成的线上地址没有http：//，所以必须自己手动添加，否则不会生效哦

引入完成后，就可以使用以下的方法添加字体图标了！

方法1——使用类名引入字体图标

如果是一个标签来使用字体文件，可以采取类名的形式。（常用）

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

- 第一个类名 `iconfont` 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。不加就不会生效。

- 第二个类名 `icon-daohangdizhi`，想使用的字体图标的类名。

方法2——使用unicode编码

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

<strong> &#xe8ab; </strong>

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

strong {

font-family: 'iconfont';

}

方法3——使用伪元素字体图标

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

.car {

width: 200px;

height: 45px;

border: 1px solid pink;

text-align: center;

line-height: 45px;

font-family: 'iconfont';

}

.car::before {

content: "\e63b";



}

.car::after {

content: "\e686";

}

使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

方法4——使用js

暂无