Font-awesome: Ver 5.1.0 - SVG & JS（only Brands icons） could not displayed CSS Pseudo-elements.

Created on 22 Jun 2018 · 9Comments · Source: FortAwesome/Font-Awesome

Version: 5.1.0
use type: svg & js （CSS Pseudo-elements）

Brands icons could not displayed CSS Pseudo-elements.

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
  <style>
    p .svg-inline--fa {
      margin-right: .5em;
    }

    ::before {
      display: none;
    }

    .brands::before {
      font-family: 'Font Awesome 5 Brands';
      content: "\f270";
    }

    .solid::before {
      font-family: 'Font Awesome 5 Solid';
      content: "\f02d";
    }

    .regular::before {
      font-family: 'Font Awesome 5 Regular';
      content: "\f086";
    }

  </style>
</head>

<body>
  <p class="brands">amazon</p>
  <p class="solid">book</p>
  <p class="regular">comments</p>

  <script>
    FontAwesomeConfig = { searchPseudoElements: true };
  </script>
</body>

</html>

bug svg

Source

strktn

All 9 comments

Hi!

Thanks for being part of the Font Awesome Community and for reporting this.

I think I can confirm

Tthere has been breaking changes between 5.0 and 5.1 releases in the pseudo element feature and they are documented here: https://github.com/FortAwesome/Font-Awesome/blob/master/CHANGELOG.md#changed

but I'm still not able to make brands work

http://jsfiddle.net/tagliala/5kczf4j3/4/

tagliala on 22 Jun 2018

Just noticed this too. Looks like the SVG generated has data-prefix="far" instead of fab. And the data-icon is "undefined" rather than the icon name

maseyuk on 22 Jun 2018

Fontawesome 5.1.0 is not working with all.css?

Why you guys are separating those font files and CSS.

1: Separated font files will load each of the fonts on front-end.

2: CSS files are actually not clear and all.css included all things but it's not working with Pseduo after before.

Thanks.

Uranbold on 26 Jun 2018

@Uranbold

Certainly, Fontawesome 5.1.0 is working with all.css.

This problem occurs when using SVG & JS.
And, Fontawesome 5.0.13 is working with all.js.
When Version was 5.0.13, The above HTML was introduced as how to use in official site.
https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements（This link has become a currently disabled.）

Thanks.

strktn on 26 Jun 2018

I am attempting to use pseudo elements with 5.1.0 too and have found a console error being thrown.

I am building the JS with webpack 4 which works fine when using icons in the usual JS/SVG manner.

import { config, library, dom } from '@fortawesome/fontawesome-svg-core'
import { fal } from '@fortawesome/pro-light-svg-icons'

library.add(fal);
config.searchPseudoElements = true;
dom.watch();

I have also attempted to import the specific icon directly, rather than the whole set (faCalendarCheck instead of fal, in my case).

li {
  padding: 0 0 1rem 3rem;

  &::before {
    content: '\f274';
    font-family: 'Font Awesome 5 Light';
    position: absolute;
    left: 2rem;
  }
}

This throws an error in the console:

Uncaught TypeError: Cannot read property 'f274' of undefined
    at byUnicode (index.es.js:794)
    at eval (index.es.js:1399)
    at Array.forEach (<anonymous>)
    at eval (index.es.js:1381)
    at Array.forEach (<anonymous>)
    at eval (index.es.js:1380)
    at disableObservation (index.es.js:950)
    at searchPseudoElements (index.es.js:1377)
    at Object.i2svg (index.es.js:1708)
    at autoReplace (index.es.js:1903)

Obviously the line numbers are from the compiled JS, but the byUnicode reference appears to be from this file.

Hopefully this helps with any diagnosing of issues. I am not posting as a plea for help! There are other options I have here for my project.