html中的字体图标的原理_html 字体图标-优快云博客

本文链接：https://blog.youkuaiyun.com/x3895/article/details/144438518

1.是什么？

字体图标本质就是字体，在字体中有各种各样的字体，包括图状的字体。

2.为什么需要字体图标？

在很多项目中使用图标是很常见的，那在项目中图标一般都会被理解为是图片。但是整个项目中的图标都使用图片来做的话会使项目资源变大。臃肿，因此后期出现了字体图标。

字体图标的优点：体积小，使用方便，放大不失帧，可自定义设置颜色

3.如何使用（字体图标在项目中原生使用的过程）

1.下载字体图标

2.声明字体css类名

@font-face {
  /* 声明字体名称 */
  font-family: "iconfont";
  /* 使用的字体文件路径 */
  src: url('./fonts/iconfont.ttf');
}

.iconfont{
  /* 当前类名的文字字体使用的是iconfont */
  font-family: "iconfont";
  /* 文字大小 */
  font-size: 12px;
  /* 文字不倾斜 */
  font-style: normal;
}

/*重点 将字符实体(字体编码)通过伪元素的content方式来使用 */
.music::before{
  content:"&#xe654;" ;
}

<body>
//通过字符实体将图标显示出来（缺点太繁琐）
 <i class="iconfont">&#xe654;</i>
 <i class="iconfont music">&#xe654;</i>
</body>

3.标签元素绑定className