Assign different font family to an Icon fonts, possible?

Question

Most of the time I use IcoMoon App to get some icons or make my own to use them. I ran into a situation where I wanted to place an icon beside a paragraph<p> tag, and normally IcoMoon generates the icons and associate them to a class name with the pseudo class :before. I just get the class and apply it to my paragraph.

I found a problem that before applying the icon font, I already assigned a font-family:my-font; to the <p> tag. When I applied the icon the font-family:ico-moon; generated along with the icon was applied to the tag, and it ruined it. Is it possible to preserve my font and the icon for the <p> tag ?

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>

And you have `p` with own font and `p.class::before` with `ico-moon` font? Can you please provide working example or at least significant snippets of html/css? — Sojtin, Oct 03 '16 at 08:08
There must be some other style that overriding your font, your snippet is correct. Live example - https://jsfiddle.net/5o7of5jm/ — Sojtin, Oct 03 '16 at 08:49
@Sojtin my snippet ca not be working, cause I never used real fonts, it is just for the sake of demonstration. — AndrewMk, Oct 03 '16 at 09:07
yea, i mean if you swap with real font as i did here jsfiddle.net/5o7of5jm — Sojtin, Oct 03 '16 at 09:12
@Sojtin I believe this is different when applying a real life working icon-font, and the fiddle has a typo I guess, you wrote the pseudo class with two colons preceding the class name instead of one. — AndrewMk, Oct 03 '16 at 09:27
here you go - example with real live icon-font https://jsfiddle.net/5o7of5jm/2/, pseudo elements in css3 are with double colons — Sojtin, Oct 03 '16 at 09:35
Even if you want, you can't affect font from `::before` `::after` (children) to parent element. — Sojtin, Oct 03 '16 at 09:43
@Sojtin Thanks and maybe you would want to verify that it is possible in an answer rather than a comment. — AndrewMk, Oct 03 '16 at 10:13

score 0 · Accepted Answer · answered Oct 03 '16 at 10:21

There is no possible to affect font from ::before ::after (children) to parent element, so in my opinion there must be some other parent which overriding your font.

proof:

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

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

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

Assign different font family to an Icon fonts, possible?

1 Answers1