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 图标更适合现代复杂需求。