Font awesome 5 on pseudo elements

Question

In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.

Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements

I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS

Answer 1

Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not "□□□" instead).

font-weight has to be:

• 400 for Regular and Brands symbols
• 900 for Solid symbols
• 300 for Light symbols

I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is:

@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */  /* ... */  .class:before {     /* >> Symbol you want to use: */     content: "\f16c";     /* >> Name of the FA free font (mandatory), e.g.:                - 'Font Awesome 5 Free' for Regular and Solid symbols;                - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);                - 'Font Awesome 5 Brand' for Brands symbols. */     font-family: 'Font Awesome 5 Free';     /* >> Weight of the font (mandatory):                - 400 for Regular and Brands symbols;                - 900 for Solid symbols;                - 300 for Light symbols. */     font-weight: 900;      /* >> Optional styling: */     display: inline-block;     /* ... */ }