I am trying to use the usual :after technique with font awesome pro 5.

.thumb-player:after{
    content:'\f144';
    font-family: 'Font Awesome\ 5 Pro';
    position: absolute;
    width: 10px;
    height: 10px;
}

I loaded it via script: fontawesome-all.min.js

Can't seem to get it to work. A working example would be appreciated.

I am trying to use the usual :after technique with font awesome pro 5.

.thumb-player:after{
    content:'\f144';
    font-family: 'Font Awesome\ 5 Pro';
    position: absolute;
    width: 10px;
    height: 10px;
}

I loaded it via script: fontawesome-all.min.js

Can't seem to get it to work. A working example would be appreciated.

• javascript
• svg
• font-awesome

• Have you tried loading it via CSS instead? – Raphael Cunha Commented Feb 12, 2018 at 19:57
• The idea is to keep the SVG format. With CSS is the old way – Ignacio Correia Commented Feb 12, 2018 at 20:05
• 2 Check the documentation on this. fontawesome./how-to-use/svg-with-js#pseudo-elements. Looks like you need to add this script <script> FontAwesomeConfig = { searchPseudoElements: true }; </script> – Raphael Cunha Commented Feb 12, 2018 at 20:31
• RbCunha that one worked. Took me a little to understand but worked. If you would like to elaborate more the answer below will marked it as solved. – Ignacio Correia Commented Feb 13, 2018 at 7:22

2 Answers 2

According to the Font Awesome documentation, the CSS pseudo elements are disabled by default if you are loading the icons through their JavaScript.

Since searching for pseudo-elements requires DOM queries that could slow down performance for anyone who doesn’t need them they are disabled by default.

What they suggest doing is to set the Font Awesome config to look for CSS pseudo elements by adding the following to your page.

Order matters

Make sure you configure Font Awesome before the browser loads the main library.

<!-- This code es first -->
<!-- Enable searching for pseudo elements -->
<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>
<!-- Load Font Awesome SVG with JS -->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>

What this does is allow the JavaScript file to look for Pseudo elements and change the icons accordingly.

What type of element is .thumb-player?

If you are trying to use :after or :before width SVG elements, like <text>, then you are out of luck. :after and :before are not supported in SVGs. They are HTML only.