引入相关文件(前提)
1.复制相关的文件,到 fonts文件夹里面
2.引入 css
使用类名引入字体图标(重点记住)
如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)
第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
第二个类名 icon-daohangdizhi, 告诉盒子到底使用哪个小图标。
使用unicode编码(了解)
也可以直接在标签内部放入一个编码
html标签
css 要指定当前标签的文字是字体图标,必须要声明。
strong { font-family: 'iconfont'; }
使用伪元素字体图标(记住)
购物车
这样结构比较的清晰,省了很多的小盒子
.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"
小结
字体图标是前端工程师必须具备的知识点。 开发中, 字体图标上传,选择,都是网页美工给我们准备好了。
我们重点是下载和使用。
字体图标使用可以整体分为两大步骤:
1.引用线上地址即可。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">
2.调用 开发中最常用的是使用类名来调用,所以重点记住这个就可以了。