0

I've seen many answers to make this happen, but none of those answers mention the issue I am having.

So I am using Font Awesome's PRO SVG & JS Library, and was originally having issues getting icons to display. I read that not only do I need to properly include the correct pseudo class markup in my CSS, but I also need to add a line of JS on my page:

window.FontAwesomeConfig = { searchPseudoElements: true }

While my icons are now showing up, they are still being preceded with the anger-inducing open square glyph.

Here's what I have for markup:

HTML

<ul class="actionMessage">
     <li><span>Your name has been changed successfully</span></li>
</ul>

CSS

.actionMessage {
    padding: 0.25rem;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: .75rem 1.25rem;
    border-radius: 0.25rem;
}

.actionMessage li {
    color: #155724;
}

.actionMessage li:before {
    content: "\f0f3";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
}

JS

window.FontAwesomeConfig = { searchPseudoElements: true }

The results I am getting are enter image description here

So what am I doing wrong? How can I get rid of that open square glyph?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Murphy1976
  • 1,415
  • 8
  • 40
  • 88
  • 1
    add `font-size:0` or `display:none` to the pseudo element. The svg is generated based on the pseudo element but the pseudo element remains and create the empty square – Temani Afif Sep 25 '18 at 14:27
  • tell if the above is not working for your case ... Probably the PRO font has other issues – Temani Afif Sep 25 '18 at 14:39
  • the solution I found was to set ::before to display: none; For some reason, it was rendering an icon for :before and ::before – Murphy1976 Sep 25 '18 at 15:39
  • exactly, like I explained, the before element is used by the JS to create the SVG and it remains and since there is no font (no CSS code) you will have the empty square created by the pseudo element. display:none, font-size:0;, visibility:hidden, etc all are good, the trick is to hide it – Temani Afif Sep 25 '18 at 15:44
  • I'm not seeing anywhere in the duplicate question where `:before` and `::before` play different roles in this situation. – Murphy1976 Sep 25 '18 at 20:07
  • `:before` and `::before` are exactly the same element, they aren't different ... the browser uses the `::` syntax, you can also change your code with `::before` ... the duplicate shows you that you need to hide the pseudo element when using JS version (either with display:none or font-size:0 or any other trick) – Temani Afif Sep 25 '18 at 20:16
  • Your issue is that you are having the :before AND the SVG as icon .. the SVG is showing correctly and the before is showing a square, – Temani Afif Sep 25 '18 at 20:18

0 Answers0