可以将不同的字体系列分配给Icon字体吗?

时间:2016-10-03 07:58:20

标签: html css fonts icons icon-fonts

大部分时间我使用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>

1 个答案:

答案 0 :(得分:0)

不可能影响从::before ::after(子)到父元素的字体,所以在我看来必须有一些其他父母覆盖你的字体。

证明:

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

.test::before {
  content: "foo ";
  font-family: Arial; 
}
<p class="test"> 
  bar
</p>