css 制作字体图标
使用 CSS 制作字体图标的方法
使用 Unicode 字符
Unicode 包含了许多图标字符，可以直接通过 CSS 的 content 属性插入到页面中。
.icon::before {
font-family: "Segoe UI Symbol";
content: "\2605"; /* Unicode 星星符号 */
}使用 Font Awesome
Font Awesome 是最流行的字体图标库之一，可以通过 CDN 引入并使用 CSS 控制样式。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">.icon::before {
font-family: "Font Awesome 6 Free";
content: "\f005"; /* Font Awesome 星星图标 */
font-weight: 900;
}使用自定义字体图标
可以通过工具如 IcoMoon 或 Fontello 生成自定义字体图标文件，并在 CSS 中引入。
@font-face {
font-family: 'MyIcons';
src: url('myicons.woff2') format('woff2'),
url('myicons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.icon::before {
font-family: 'MyIcons';
content: "\e001"; /* 自定义图标的 Unicode 编码 */
}使用 CSS 伪元素和样式控制
通过伪元素和 CSS 属性调整图标的大小、颜色和位置。
.icon {
display: inline-block;
font-size: 24px;
color: #ff5733;
margin-right: 10px;
}使用 SVG 作为字体图标替代
虽然 SVG 不是传统字体图标，但可以通过 CSS 控制 SVG 图标的样式。
<span class="icon">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/>
</svg>
</span>.icon svg {
width: 1em;
height: 1em;
vertical-align: middle;
color: inherit;
}使用 CSS 变量动态控制图标样式
通过 CSS 变量动态调整图标的颜色和大小。
:root {
--icon-color: #3498db;
--icon-size: 20px;
}
.icon {
color: var(--icon-color);
font-size: var(--icon-size);
}这些方法可以根据项目需求灵活选择，传统字体图标适合轻量级场景，而 SVG 图标更适合现代复杂需求。
