一.字体图标是什么
- 字体图标展示的是图标,本质是字体。 是处理简单的、颜色单一的小图标
- 如图中框住的就是字体图标
二.字体图标的优点
-
灵活性:灵活地修改样式,例如:尺寸、颜色等
-
轻量级:体积小、渲染快、降低服务器请求次数
-
兼容性:几乎兼容所有主流浏览器
-
使用方便
三.图标库
Iconfont:https://www.iconfont.cn/ 阿里巴巴字体库 (常用)
四.使用方法
1.下载字体包
2.解压字体包并复制相关文件到本地目录下
3.标签使用字体图标
五.具体使用方法
一般情况:因为阿里字体库比较稳定,很多情况下,我们无需下载相关文件到本地,直接引入在线地址即可。
方法一:使用字体图标-类名:
- 引入字体图标样式表
-
<!-- 引入字体图标的css --> <link rel="stylesheet" href="./fonts/iconfont.css">
调用图标对应的 类名,必须调用2个类名 -
iconfont类:基本样式,包含字体的使用等
-
icon-xxx:图标对应的类名
-
<!-- iconfont是必须带的类名 --> <!-- 使用一个标签加上字体图标类名 --> <span class="iconfont icon-xxx"></span>
方法二:使用字体图标 – unicode编码:
-
HTML
-
<span><span>
-
· 然后调用类名 class=“iconfont”
方法三 :使用字体图标 – 伪元素:
-
通过查看iconfont.css文件
-
.icon-gouwucheman:before { content: "\e600"; }
六.购物车案例
1.代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./fonts/iconfont.css"> <style> i{ color: red; } .box{ width: 120px; height: 50px; text-align: center; line-height: 50px; background-color: pink; } </style> </head> <body> <div class="box"> <i class="iconfont icon-gouwucheman"></i> <span>购物车</span> <em class="iconfont icon-arrow-down"></em> </div> </body> </html>
2.效果图