Search code examples
csscss-selectorsiconsglyphicons

Reason for icons (icon fonts) always in ::before pseudo-selector

Is there a reason, so many icon-Libraries (Glyhpicon, Font Awesome, Antd icons,…) put their icon in the ::before–pseudo selector? (rather than in the tag directly?)

i::before {
    content: '\E60A';
    ...
}
Solution

  • Is there a reason, so many icon-Libraries (Glyhpicon, Font Awesome, Antd icons,…) put their icon in the ::before–pseudo selector?

    That method has several advantages ...

    • makes it trivial to switch a specific icon for a different character throughout the whole site via CSS

    • such icons are mostly used rather as “decoration” than actual content (so this touches on the issue of accessibility as well)

    • you can't insert content in an actual element itself, that is reserved for pseudo elements (thanks @Mr Lister for this one)