Keyamoon / IcoMoon-Free

A package of flat vector icons together with an installable ligature font
https://icomoon.io
Other
1.29k stars 318 forks source link

Need to change the selector where font-family is declared #7

Closed mr-alien closed 9 years ago

mr-alien commented 9 years ago

Recently while using IcoMoon I used something like this

<span class="icon-sound" data-tooltip="Whatever is here"></span>

So here my tooltips inherits the font-family of icomoon instead of inheriting the default font-family. For example if we use something like this

[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    white-space: nowrap;
    /* Other stylings */

    font-family: Arial; /* Need to specify the font-family else it inherits icomoon */
}

Solution is to declare it on the :before pseudo instead like

[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
        line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
Keyamoon commented 9 years ago

That would cause some other issues. Read the answer given here to learn more: https://groups.google.com/forum/#!starred/icomoon/4caffAUh0V0

I suggest you to use a parent <span> to solve your tooltip problem.