Font-awesome: Content removed when using CSS pseudo-elements

[transbetacism]

The content is removed in some scenarios when using CSS pseudo-elements.

See video here (notice CSS code in left side of the screen):
http://share.hellodetail.com/oVXx

...and another example here:
http://share.hellodetail.com/oVzF

CSS example:

ul li a {

  &::before {
      display: none;
      font-family: 'Font Awesome 5 Solid';
      content: '\f0c8';
  }

  .svg-inline--fa {
      @include opacity(0.15);
      margin-right: 0.5em;
   }
}

Using Font Awesome v5.0.2 on a WordPress site:

function stilren_scripts() {
    wp_enqueue_script('stilren-fontawesome', 
    'https://use.fontawesome.com/releases/v5.0.2/js/all.js');

    wp_add_inline_script('stilren-fontawesome', 'FontAwesomeConfig = { searchPseudoElements: true }', 'before');
}
add_action('wp_enqueue_scripts', 'stilren_scripts');

[robmadole]

I've seen this but it's been tough to reproduce. Thanks for sharing this and putting the work into documenting the issue!

[BWPanda]

I've also noticed this. Happens on my website, doesn't happen in a JSFiddle I tested though.

When it does happen on my site I notice that, for a brief moment while the page is still loading, the content displays properly with the FA icons in front of them, but then the content disappears and just the icons are left...

Hope that helps.

[livan75]

Same issue for me (with v5.0.2), and it's still impossible for me to reproduce it in a fiddle...

The content displays properly for me also, just for about a few milliseconds (checked in devtools), then disappears... Nevertheless it works fine with v5.0.1.

[transbetacism]

@robmadole let me know if (and where) you want me to send the WordPress theme where I am getting these issues in case you wanna troubleshoot with it...

[rubenelshof]

I am unable to reproduce it in a fiddle but I ran into this issue a week ago.
I was be able to fix it by removing a small part of the code.

In version 5.0.1 using fontawesome-all.js at line 2427 you will find the following piece of code:

if (!fontFamily && pseudoElement) {
    pseudoElement.remove();
}

The code was changed in 5.0.2 at line 2556 to:

if (pseudoElement) {
  if (pseudoElement.nextSibling && pseudoElement.nextSibling.textContent.indexOf(DATA_FA_PSEUDO_ELEMENT)) {
    remove(pseudoElement.nextSibling);
  }
  remove(pseudoElement);
  pseudoElement = null;
}

The problem in this code is the following line
remove(pseudoElement.nextSibling);

This removes content when using CSS pseudo elements.
By removing ".nextSibling" in the that line it didn't remove the content,

[JanikWeb]

@RE1992 worked for me.

[aerni]

Same problem here. Is there a fix coming soon?

[robmadole]

Until I can reproduce it I'm not confident in fixing it. I'll have to do that first.

[aerni]

@robmadole The fix provided by @RE1992 works. Can't you just remove that line?

[robmadole]

@aerni90 that code has a purpose. I'd rather fix it than just removing it.

[dohnutt]

Having the same issue. My FontAwesome includes (fa-brands.js, fa-regular.js, and fontawesome.js) are minified along with other JS into a single script.js file.

FontAwesomeConfig = { searchPseudoElements: true }; is included before that script.js file.

My HTML looks like this:

<div class="panel-heading">
    <h4 class="panel-title">
        <a href="#">Panel title goes here</a>
    </h4>
</div>

My CSS looks like this:

.panel-heading a::before {
    content: '\f067';
    font-family: 'Font Awesome 5 Regular';
    display: none;
}

On load, the text in the <a> tag disappears, leaving only the SVG icon. Let me know if I can provide more info to help out. Would love to get this fixed.

[rubenelshof]

@robmadole Can confirm that the last update 5.0.4 fixed this issue for me.

[robmadole]

Awesome. If anyone else has different results I'll be happy to re-open this.

[transbetacism]

Works for me too (tested on 5.0.6).

[vrsotto]

Hi! i currently using FA v5.0.8 and experiencing this issue as it display the icon but it hide's text content after loading...

[tagliala]

@vrsotto please open a new issue and provide a reproducible test case