アイコンフォントに異なるフォントファミリーを割り当てることは可能でしょうか？

Question

ほとんどの場合私はIcoMoon Appを使っていくつかのアイコンをつけたり、自分で使ったりします。私は段落<p>タグの横にアイコンを配置したいという状況に遭遇しました。通常、IcoMoonはアイコンを生成し、クラス名に疑似クラス:beforeを関連付けます。私はクラスを取得し、それを私の段落に適用します。

アイコンフォントを適用する前に、すでに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>

Answer 1

親要素に::before::after（子供）からフォントに影響を与えるいかなる可能性はありませんので、私の意見では、あなたのフォントを上書きする他のいくつかの親が存在しなければなりません。

証明：

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

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

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