Search code examples
htmlcssfontsiconsicon-fonts

Assign different font family to an Icon fonts, possible?


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>


Solution

  • 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>