html - CSS div 内容和字体图标缩放

Question

这个问题有 2 个部分。

第1部分

我有想要显示指标的情况：

HTML

<div class="alert-icon alarm">
     <div class="hmi-icon-alarm"></div>
</div>

hmi-icon-alarm 是字体文件中的图标。

CSS

.alert-icon.alarm {
    background-color: #c4262e;
    border-style: solid;
    border-color: #ffffff;
}

.alert-icon.alarm .hmi-icon-alarm {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

上面的代码工作正常，但理想情况下为了简化我想将 HTML 更新为：

<div class="alert-icon alarm"></div>

并基于“alert-icon.alarm”类选择器，我想添加设置字体图标的子 div。类似于做这样的事情：

.alert-icon.alarm::after {
    content: '<div class="hmi-icon-alarm"></div>';
}

我知道使用内容是不可能的，但是是否有另一种（浏览器支持）方法可以做到这一点？

第2部分

给定相同的 html 和 css，我希望能够控制字体图标的大小，使其与 .alert-icon 类中定义的宽度成正比（宽度和高度始终相同），所以它可以是放大和缩小并看起来相同（尽管大小不同）

HTML

<div class="alert-icon alarm">
     <div class="hmi-icon-alarm"></div>
</div>

hmi-icon-alarm 是字体文件中的图标。

CSS

.alert-icon {
    width: 200px;
    height: 200px;
}

.alert-icon.alarm {
    background-color: #c4262e;
    border-style: solid;
    border-color: #ffffff;
}

.alert-icon.alarm .hmi-icon-alarm {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

标签： htmlcss

Answer 1

.alert-icon {
    --size: 200; /* Icon width */
    --scale-factor: 0.25 /* Icon size relative to container */;
    width: calc(var(--size) * 1px)
}
.alert-icon.alarm::after {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    font-size: calc(var(--size) / var(--scale-factor) * 1px);
    transform: translate(-50%, -50%);
    /* All other properties belonging to .hmi-icon-alarm */ 
}

注意： IE 可能不支持它。