Присвоить различное семейство шрифтов шрифтам Icon, возможно?

Большую часть времени я использую IcoMoon App, чтобы получить некоторые иконки или сделать свой собственный, чтобы использовать их. Я столкнулся с ситуацией, когда хотел разместить значок рядом с тегом абзаца <p>, и обычно IcoMoon генерирует значки и связывает их с именем класса с псевдокласс :before. Я просто получил класс и применил его к моему абзацу.Присвоить различное семейство шрифтов шрифтам Icon, возможно?

Я обнаружил, что перед применением шрифта значка я уже присвоил font-family:my-font; тегу <p>. Когда я применил значок, к тегу был применен font-family:ico-moon;, сгенерированный вместе с пиктограммой, и он испортил его. Можно ли сохранить мой шрифт и значок для тега <p>?

p{ 
 
    font-family:my-font; 
 
} 
 
.icon-moon-dummy:before{ 
 
font-family: 'icomoon' !important; 
 
content:"\e900"; 
 
}

<p>this is normally displayed with "my-font" family </p> 
 

 
<p class="icon-moon-dummy"> 
 
    now "my-font" family is not applied instead "icon-moon" font is applied duesto the cascading and the "!important" statement. 
 
    is it possible now to have my font applied for the p tag and the icon-moon font applied only for the icon so that it works? 
 
</p>

источник

2016-10-03 AndrewMk

И у вас есть 'p' с собственным шрифтом и' p.class :: before' с 'ICO-moon' шрифтом? Можете ли вы предоставить рабочий пример или, по крайней мере, важные фрагменты html/css? – Sojtin

Должен быть какой-то другой стиль, который переопределяет ваш шрифт, ваш фрагмент верен. Пример в реальном времени - https://jsfiddle.net/5o7of5jm/ – Sojtin

@Sojtin мой фрагмент не работает, потому что я никогда не использовал настоящие шрифты, это просто ради демонстрации. – AndrewMk

Там нет никакой возможности влиять на шрифт из ::before::after (детей) к родительскому элементу, поэтому на мой взгляд, должен быть какой-то другой родитель, который подменяют шрифт.

доказательство:

p { 
 
    font-family: "Comic Sans MS"; 
 
} 
 

 
.test::before { 
 
    content: "foo "; 
 
    font-family: Arial; 
 
}

<p class="test"> 
 
    bar 
 
</p>

источник

2016-10-03 10:21:13 Sojtin

Присвоить различное семейство шрифтов шрифтам Icon, возможно?

ответ

Смежные вопросы