一个网站的好坏不只取决于网站的性能与功能，还取决用户使用的舒适度。
文章目录
- 1.介绍字体图标
- 2.字体图标的下载
- 3.使用字体图标
1.介绍字体图标
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标，例如音乐播放器的暂停、收藏、分享等图标。
为什么叫“字体图标”呢？
因为它展示的是图标，本质上它是属于字体的，拥有字体的属性，可以像字体一样改变字体颜色大小。
2.字体图标的下载
推荐两个下载网站：
- icomoon字库 网址：http://icomoon.io （外国服务器，打开网速慢）
- 阿里iconfont字库 网址：http://www.iconfont.cn/
注意：这两个网站的图标下载都是免费的。
想要在网站使用字体图标步骤：
- 字体图标下载
- 字体图标引入html页面
教你下载icommon字库图标：
第一步：
第二步：
第三步：
第四步：
第五步：fonts复制到项目根目录：
3.使用字体图标
a.在css样式中全局声明字体：即把这些字体文件通过css引入到我们页面中。
b.使用字体图标(复制这些图标对应的小方框)
c.在代码中引入这些小方框(图标)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空隙bug</title>
<style>
@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?raxfuq");
src: url("fonts/icomoon.eot?raxfuq#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?raxfuq") format("truetype"),
url("fonts/icomoon.woff?raxfuq") format("woff"),
url("fonts/icomoon.svg?raxfuq#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: "icomoon";
margin: 0px 30px;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
查看效果：
我上面说过，这是字体图标，拥有字体属性，来修改字体颜色：
color: aquamarine;
再来修改一下字体图标大小：
/* 默认字体16px是正常大小 */
font-size:10px;
到这里，你会如何使用字体图标装饰你的网站了吗？
本文地址：https://blog.csdn.net/weixin_43334673/article/details/107285121
