css 制作字体图标

使用 CSS 制作字体图标

方法一：使用 Unicode 或字体图标库

Unicode 或字体图标库（如 Font Awesome）可以直接通过 CSS 引入并使用。以下是具体实现方式：

在 HTML 中引入字体库（以 Font Awesome 为例）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

在 CSS 中直接使用对应的类名：

.icon {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

在 HTML 中使用图标：

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

方法二：使用 @font-face 自定义字体图标

如果需要自定义字体图标，可以通过 @font-face 引入图标字体文件（如 .woff、.ttf 格式）。

定义字体文件：

@font-face {
  font-family: 'MyIconFont';
  src: url('myiconfont.woff2') format('woff2'),
       url('myiconfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

使用自定义字体图标：

.icon {
  font-family: 'MyIconFont';
  font-size: 24px;
}

在 HTML 中通过 Unicode 或伪元素显示图标：

<span class="icon"></span>

或使用伪元素：

.icon::before {
  content: "\e900";
  font-family: 'MyIconFont';
}

方法三：使用 CSS 伪元素和 content 属性

如果图标是简单的形状（如箭头、圆形等），可以直接用 CSS 绘制：

绘制三角形图标：

.arrow-icon::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #000;
}

绘制圆形图标：

.circle-icon::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
}

方法四：使用 SVG 作为字体图标

通过 CSS 内联 SVG 或引用 SVG 文件实现图标：

内联 SVG：

<span class="svg-icon">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
  </svg>
</span>

CSS 控制 SVG 样式：

.svg-icon svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

方法五：使用 CSS 变量动态控制图标

通过 CSS 变量灵活调整图标样式：

定义变量：

:root {
  --icon-size: 24px;
  --icon-color: #333;
}

应用变量：

.custom-icon {
  font-size: var(--icon-size);
  color: var(--icon-color);
}

在 HTML 中动态修改：

<i class="fas fa-home custom-icon" style="--icon-color: #f00;"></i>