HTML5+CSS3字体图标详解

202 阅读1分钟

引入相关文件(前提)

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.调用 开发中最常用的是使用类名来调用,所以重点记住这个就可以了。