Этот вопрос состоит из 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%);
}
0
ee0jmt 28 Ноя 2019 в 20:25

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.

0
Ivan Didyk 28 Ноя 2019 в 20:56