Font awesome 5 on pseudo elements

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

You need to enable it (it's disabled by default).

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Css:

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

Other types: Font Awesome 5 + Solid or Regular or Light or Brands

benjaminplanche

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;
    /* ... */
}

I think its working fine just like this:

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

I got 5 to work using

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

in <head> and

:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  content: "\f167";
}

in my css

Use this Link ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css

CSS

ul li{
    list-style-type: none;
    position: relative;
}

ul li:before{
  position: absolute;
  color:#ff0000;
  top:0;
  left:-30px;
  font-family: 'Font Awesome 5 Free';
  font-size:1.2em;
  content: "\f105";
  font-weight: 900; /* <-- add this or 400 for other styles */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

My problem disappear when i set this value: font-weight: 900;

Should you be using Fort Awesome to serve your icons then you need to add font-family: <my-kit-name>, no need to use font-weight: 400/900.

For more info see this link:

https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

来源：https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements

标签

font-awesome

font-awesome-5