可以为图标字体分配不同的字体系列吗？答案

【问题标题】：Assign different font family to an Icon fonts, possible?可以为图标字体分配不同的字体系列吗？
【发布时间】：2017-02-11 02:53:54
【问题描述】：

大多数时候我使用IcoMoon App 来获取一些图标或自己制作以使用它们。我遇到了一种情况，我想在段落<p> 标记旁边放置一个图标，通常 IcoMoon 会生成图标并将它们与伪类:before 的类名相关联。我刚刚获得课程并将其应用于我的段落。

我发现一个问题，在应用图标字体之前，我已经给<p>标签分配了一个font-family:my-font;。当我应用图标时，与图标一起生成的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>

【问题讨论】：

你有p 和p.class::before 和ico-moon 字体？您能否提供工作示例或至少重要的 html/css 的 sn-ps？
必须有其他样式覆盖您的字体，您的 sn-p 是正确的。现场示例 - jsfiddle.net/5o7of5jm
@Sojtin 我的 sn-p 不能工作，因为我从未使用过真正的字体，只是为了演示。
是的，我的意思是，如果你像我在这里 jsfiddle.net/5o7of5jm 那样换成真正的字体
@Sojtin 我相信这在应用现实生活中的工作图标字体时会有所不同，而且我猜小提琴有一个错字，你写的伪类在类名之前有两个冒号而不是一个。

标签： html css fonts icons icon-fonts

【解决方案1】：

不可能影响从::before::after（子元素）到父元素的字体，所以我认为必须有其他父元素覆盖您的字体。

证明：

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

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

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

【讨论】：