Menu
I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.
1) I have imported FA from the documentation and in the <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> 2) My html looks like this :
<span class='myClass'>Movies</span> 3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.
My css currently looks like this but it isn't working, it gives me a square instead of the icon.
.myClass { font-size:25px; } .myClass::after { font-family: 'Font Awesome 5 Free'; content: '\f008'; }<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"> <span class='myClass'></span>Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?
(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)
290
If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.
To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
You need to add
font-weight:900.myClass { font-size:45px; } .myClass::after { font-family: 'Font Awesome 5 Free'; content: "\f008"; font-weight: 900; }<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <span class='myClass'></span>The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:
https://fontawesome.com/icons/film?style=solid
Why the other icon is working?
Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.
.myClass::after { font-family: 'Font Awesome 5 Free'; content: "\f007"; visibility: visible; font-weight: 900; } .myClass-1::after { font-family: 'Font Awesome 5 Free'; content: "\f007"; visibility: visible; }<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"> <span class='myClass'>Solid </span> <br> <span class='myClass-1'>Regular </span>As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used
You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Related questions
Font Awesome 5 shows empty square when using the JS+SVG version
Font Awesome 5 unicode
Font Awesome 5, why is css content not showing?
175
from your comment :
Awesome, thanks for the explanation ! Do you know what font-weight I would need to use if the light version would have been free ?
test text-stroke with a transparent color to get a thinner render :
.myClass { font-size: 45px; } .myClass::after { font-family: 'Font Awesome 5 Free'; content: "\f008"; font-weight: 900; -webkit-text-stroke; transparent 0.2em; } .myClass+.myClass::after { -webkit-text-stroke: white 0.02em; } .bis { font-size: 4rem; color: blue }<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <span class='myClass'></span> <span class='myClass'></span> <span class='myClass bis '></span> <u> <span class='myClass bis '></span></u>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
