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>
