Как поменять шрифт кроме иконок?

151
14 февраля 2022, 19:50

На сайте используется несколько шрифтов, нужно установить один, к примеру Montserrat, кроме иконок (на сайте так же есть inline стили, которые имеют различные значения для font-family).

Если добавить это правило:

body * {
    font-family: Montserrat, sans-serif !important;
}

то шрифт поменяет также и FontAwesome иконки. Как сделать чтобы поменялся шрифт только для текста, кроме иконок?

Пытался сделать так:

body *:not(::before) {
    font-family: Montserrat, sans-serif !important;
}

но это не работает.

Answer 1

Используйте селектор, который позволит не применять правило к элементам, в которых объявлен либо класс .fa, либо предполагаемо содержится какой-либо класс, содержащий fa-

Однако будьте осторожны: к примеру, класс .2fa-input будет соответствовать селектору [class*="fa-"]).

/* для тех элементов, у которых не объявлен класс `.fa`,
   но объявлен какой-нибудь другой: к примеру, .fa-camera-retro */
body :not(.fa):not([class*="fa-"]) {
    font-family: "Montserrat", sans-serif !important;
}

Изменено: font-awesome.css содержит класс .fa, в котором определяется шрифт. Без него остальные классы, связанные с иконками, не имеют смысла, поэтому селектор можно сократить.

body :not(.fa) {
    font-family: "Montserrat", sans-serif !important;
}
READ ALSO
Как выровнять блоки

Как выровнять блоки

Нужно выравнять 8 блоков в 2 колоныУ каждого блока width: 275px;

138
Почему не работает grid в media

Почему не работает grid в media

Не работает grid в media почему ?

105
Паттерны проектирования в популярных Open Source проектах

Паттерны проектирования в популярных Open Source проектах

Может кто-то привести список частых паттернов проектирования в Open Source проектах ? Таких как symfony или laravel ?

226