CSS 图标 - CSS

CSS 图标是一种使用 CSS 技术实现的矢量图标，相比传统的图像图标，它具有以下优点：

• 可以自由调整大小和颜色，不需要为不同尺寸和颜色的图标创建多个文件；
• 可以像文本一样排版和对齐，方便进行布局；
• 可以用 CSS 的 hover 等伪类动态改变图标样式，实现更丰富的交互效果。

实现方式

CSS 图标可以通过以下方式实现：

使用字体图标

字体图标是将图标映射到字符编码上，通过设置字体族、字体大小、字体颜色等 CSS 属性来实现。常用的字体图标库有 Font Awesome、Material Icons 等。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-8WwYLYQJbPAf3qIiyfw1Dz+cVSvdCkshyrJCGhbv+MpmRzYby2hsbjiLvpq3C/J1rIy1iNkmzNtb9mlaIQvCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<i class="fas fa-check"></i>

使用 SVG 图标

SVG 图标是基于矢量图形的标准格式，可通过设置 CSS 属性 fill 来改变 SVG 图标的颜色，也可通过 width、height 属性来调整大小。

<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
  <path d="M9.172 13.828l-4-4c-0.391-0.391-0.391-1.023 0-1.414l4-4c0.391-0.391 1.023-0.391 1.414 0s0.391 1.023 0 1.414l-2.586 2.586h7.172c0.552 0 1 0.448 1 1s-0.448 1-1 1h-7.172l2.586 2.586c0.391 0.391 0.391 1.023 0 1.414-0.195 0.195-0.451 0.293-0.707 0.293s-0.512-0.098-0.707-0.293z"></path>
</svg>

常用的 CSS 属性

fill

设置 SVG 图标的填充颜色。

svg {
  fill: #333;
}

font-family

设置字体图标的字体族。

.icon {
  font-family: "Font Awesome 5 Free";
}

content

使用 CSS 伪元素 ::before 和 ::after 来插入字体图标或 SVG 图标，需要设置 content 属性来指定具体的图标。

.icon::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
}
.icon::before {
  content: url(logo.svg);
}

width、height

可以通过 CSS 属性 width、height 来控制 SVG 图标的尺寸。

svg {
  width: 24px;
  height: 24px;
}

结语

通过上述方式，我们可以轻松地实现各种美观的 CSS 图标，提升网站的用户体验和美观程度。