第十四天：字体图标

字体图标是一种将图标以字体形式嵌入网页的技术，允许开发者像使用文字一样通过CSS控制图标的样式（比如颜色，大小，阴影等）通常使用在导航菜单图标，按钮操作图标，结合动画效果

优势也很明显，适量播放，无视放大缩小。样式灵活，通过CSS直接修改颜色，大小，阴影等属性。减少HTTP请求，一个字体文件可以包含多个图标，比如多张图片更高效，兼容性好，支持所有现代浏览器，甚至部分旧版浏览器等

引入图标库链接

<!-- 必加！引入字体图标样式 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">

用 CSS 修改样式

/* 修改图标大小 */
.fa-house {
  font-size: 24px;  /* 最常用 */
}

/* 修改图标颜色 */
.fa-user {
  color: #ff4400;   /* 单色 */
}

/* 鼠标悬浮效果 */
.fa-search:hover {
  color: blue;
  transform: rotate(15deg); /* 旋转 */
}

/* 对齐、间距 */
.icon {
  margin-right: 8px;
  vertical-align: middle; /* 和文字居中对齐 */
}

以下是常用CSS样式的巡查方法