CSS 图标与示例

<i class="material-icons">camera_alt</i>

2.使用 css 自定义图标

您还可以使用 css 创建自己的图标。这是一个使用纯 css 的简单示例：

创建基本的 html 结构

<div class="icon-star"></div>

添加 css 来设计您的图标

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

此 css 片段使用边框和定位创建一个简单的星形。

3. svg 图标

您还可以使用 svg 来制作高质量图标：

内联 svg

<svg width="24" height="24" viewbox="0 0 24 24">
  <path d="m12 2l2 7v10l10 5 10-5v7z"/>
</svg>

使用svg作为背景图片

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,...') no-repeat center center;
    background-size: contain;
}

小贴士

大小和颜色：对于字体图标和内联 svg，您可以使用 font-size 或宽度和高度属性调整大小，并使用 color 或 fill 更改 svg 的颜色。
辅助功能：始终通过在需要时添加描述性文本或咏叹调属性来考虑辅助功能。
请随意尝试并混合不同的方法来找到最适合您的项目的方法！

理论要掌握，实操不能落！以上关于《CSS 图标与示例》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！