【前端基础】1 - 9 字体图标
§1-9 字体图标
1-9.1 字体图标的应用
实际上，一个网页中往往存在大量的小图。以京东为例，京东首页中的位置图标、搜索框中的摄像头图标、搜索图标、购物车图标，以及轮播图中的箭头都是小图。但是，这些图标并不是来自某一张大图，这些图标实际上是通过字体实现的。
国内常用的字体图标库来自于阿里巴巴矢量图标库（iconfont），图标库中的官方图标库能够满足大多数使用需求。
字体图标常用于在网页中添加简单的、单色小图标。字体图标虽然展示的是图标，但本质上是字体，因而受到文本相关属性控制。字体图标具有以下优势：
- 灵活性：支持灵活修改样式，如尺寸、颜色等；
- 轻量级：字体相较于图片体积小、渲染快，降低服务器请求次数；
- 兼容性：几乎兼容所有主流浏览器；
- 使用方便：先下载后使用；
1-9.2 下载图标库并使用图标
访问阿里巴巴矢量图标库，在上方导航栏中选中素材库，点击 “官方素材库”。找到心仪的图标库，选择图标并加入购物车。然后，选择 “添加至项目”，确定后，下载至本地。
选择添加至项目得到的素材更全，且方便后期往项目中追加图标。下载到本地，这是一个压缩文件。将文件解压并存放到项目中。
压缩文件中一般会含有下列文件：
index.html：包含字体预览以及引用教程的 HTML 文档；iconfont.ttf, iconfont.woff, iconfont.woff2：字体图标所依赖的字体文件；iconfont.css：导入到网页时所需要的字体样式表；- 其他文件
打开 index.html，文档中包含了三种不同的字体引用方式：Unicode 引用、Font class 引用、Symbol 引用。
示例：使用 Font class 引用导入字体图标实现搜索框。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<link rel="stylesheet" href="../../resources/iconfont/iconfont.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="search">
<input type="text" name="search" placeholder="输入关键词以搜索">
<a href="#"><span class="iconfont icon-search"></span></a>
</div>
</body>
</html>
/* style.css */
.body {
background-color: #ffffff;
}
.search {
display: flex;
margin: 15px auto;
padding: 0 15px;
width: 500px;
height: 36px;
border-radius: 18px;
background-color: whitesmoke;
}
.search input[name=search] {
flex: 1;
border: none; /* 禁用边框 */
background: transparent; /* 背景色透明 */
outline: none; /* 禁用焦点边框 */
}
.search input[name=search]::placeholder {
font-size: 14px;
color: gray;
}
.search .icon-search {
line-height: 36px;
font-size: 24px;
color: gray;
}
.search > a {
text-decoration-line: none;
}
.search > a:hover > .icon-search {
color: cornflowerblue;
}
注意：使用 Font class 导入字体，修改图标字体样式时需要使用 .iconfont 选中。
1-9.3 上传自定义图标库
可以将自己所制作的图标（.svg）上传至 iconfont 后生成自定义图标库以供使用。
