Font Awesome 5 on pseudo elements shows square instead of icon - html

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)

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?

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>

list-style-image: url("../../media/examples/rocket.svg");
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

Related

Font Awesome unicode "\f046" not showing in Chrome

I am trying to use Font Awesome Unicode (https://fontawesome.com/v4.7.0/icon/check-square-o) on my webpage.
but it is showing as below.
I spend a lot of time searching for the reason why Unicode not showing in Chrome on the internet. but still no luck.
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f046";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'>Hiiii</span>
As explained in this page, the icon you are search for is \f14a
https://fontawesome.com/icons/check-square?style=regular
It says:
This icon replaces Font Awesome 4's fa-check-square-o
Note that the link you shared is for Font Awesome 4, but in the HTML you used the version 5.
There is no icon with value /f046 that you can use as a pseudo-element. Check this cheat sheet for the icons you can use:
https://fontawesome.com/cheatsheet

Fontawesome doesn't work without this code [duplicate]

This question already has an answer here:
Font Awesome 5 Choosing the correct font-family in pseudo-elements
(1 answer)
Closed 4 years ago.
Everytime I want to use fontawesome I've to add this style to the page:
<style>
* {
font-family: fontawesome !important;
}
</style>
If not it just show a blank square , but do so i can't use another font, any
solution i can use fontawesone but don't have to define it ?
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
Try this one, They have change font-family name.
This solution is regarding Font Awesome 5. There are two ways of applying font awesome icons. In below snippet, I have shown them. You need to link font awesome new library, otherwise it won't be worked.
.fa {
font-family: "Font Awesome 5 Free"; /* updated font-family */
font-weight: 900; /* regular style/weight */
}
.my-camera::before {
font-family: "Font Awesome 5 Free"; /* updated font-family */
font-weight: 900; /* regular style/weight */
content: "\f083";
font-style:normal;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->
<br>
<i class="my-camera"></i> <!-- version 5's syntax -->
https://jsfiddle.net/Sampath_Madhuranga/sjn5Lek2/5/

Font awesome 5 on pseudo elements

In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.
Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements
I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS
Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not "□□□" instead).
font-weight has to be:
400 for Regular and Brands symbols
900 for Solid symbols
300 for Light symbols
I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is:
#import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */
/* ... */
.class:before {
/* >> Symbol you want to use: */
content: "\f16c";
/* >> Name of the FA free font (mandatory), e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
- 'Font Awesome 5 Brand' for Brands symbols. */
font-family: 'Font Awesome 5 Free';
/* >> Weight of the font (mandatory):
- 400 for Regular and Brands symbols;
- 900 for Solid symbols;
- 300 for Light symbols. */
font-weight: 900;
/* >> Optional styling: */
display: inline-block;
/* ... */
}
You need to enable it (it's disabled by default).
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
Css:
.class:before{
display: none;
content: "\f16c";
font-family: "Font Awesome 5 Brands";
}
Other types:
Font Awesome 5 + Solid or Regular or Light or Brands
I think its working fine just like this:
.class:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
I got 5 to work using
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
in <head> and
:before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: "\f167";
}
in my css
Font Awesome 5, all top answers not working in my case as I am using the free version.
The correct answer for this is in this question.
check your font type (free or pro) then follow:
Free
font-family: "Font Awesome 5 Free"
Pro
font-family: "Font Awesome 5 Pro"
Brands
font-family: "Font Awesome 5 Brands"
Don't forget that I just used the link tag with path to my CSS file in HTML.
No enabling required also didn't import the all.css file to my css file. Now it is working!
Use this Link ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css
CSS
ul li{
list-style-type: none;
position: relative;
}
ul li:before{
position: absolute;
color:#ff0000;
top:0;
left:-30px;
font-family: 'Font Awesome 5 Free';
font-size:1.2em;
content: "\f105";
font-weight: 900; /* <-- add this or 400 for other styles */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
My problem disappear when i set this value: font-weight: 900;
Should you be using Fort Awesome to serve your icons then you need to add font-family: <my-kit-name>, no need to use font-weight: 400/900.
For more info see this link:
https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

Using a fontawesome icon as alt-text for an <img>

I have some images that are loaded with a cheap trick after the DOM is ready:
<img src="" data-src="/path/to/img" alt="">
I'm just putting the content of data-src into the src-attribute with JS. Nothing fancy.
But as there are a some hundred images to load this takes some time. So I was trying to use the unicode of a FontAwesome icon as alt-text to display a cogwheel as placeholder:
<img src="" data-src="/path/to/img" alt="">
Unfortunately this won't work because the whole FontAwesome-magic isn't clicking.
Has anyone ever tried the same? Is this possible after all?
I cannot claim credit for this solution, that belongs to #PeeHaa who wrote the comment that solved #Stephan_Weinhold's question.
I'm just trying to create clarity, as all of the official answers use JavaScript, and only if you read the comments will you find it's possible with simple HTML/CSS.
HTML
<img src="" data-src="/path/to/img" alt="" class="passphoto">
CSS
img.passphoto {
font-family: 'Font Awesome 5 Free';
/* customize the following as desired */
font-size: 9em;
display: inline-block;
width: 200px;
height: 234px;
border: 1px solid lightgray;
}
I'm afraid you can't. But I can offer you a trick.
The trick is that you can handle the image load error (that's why you want the alternative text, isn't?), then show the icon you want.
It's not good solution for SEO but you want to show an icon so I guess that this is not your goal.
Note If you can't see the effect in the snippet, watch it in the bin - I think it's because caching issue.
$('img').bind('error', function() {
console.log('error');
$(this).hide().after('<i class="fa fa-gear"></i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<img src="blablalba" />
http://jsbin.com/kahuxaqezu/1/edit?html,js,output
I'm having problems with this on iPhone now?
I used the ONERROR to inject the CLASS if the image is not found.
CSS
/* FONT AWESOME (support for all icons) */
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* FONT AWESOME (user icon) */
.fa_user:after {
font-family: 'Font Awesome 5 Free';
font-size: 9em !important; /* added !important, couldn't use 900, didn't work */
content: "\f2bd"; /* UNICODE (Font Awesome) <i class="far fa-user-circle"></i> */
line-height: 1.0; /* I had to add this because it was INHERITING 1.5 throwing off the spacing */
}
HTML
<img src="./images/.photo.jpg" onerror="this.classList.add('icon', 'fa_user');" alt=''>
Font Awesome documentation
User Icon

IE11 Not recognizing the content declaration for Font Awesome

I am using Font Awesome 4.4.0 and noticed that icons only show in IE11 when I use HTML such as . However, IE11 does not recognize the "content" declaration in the Font Awesome CSS. An example of such a class is:
hr.code-light:after,
hr.code-primary:after {
content: "\f121";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
When I apply the code-light or code-primary class to the HR tag, no Font Awesome icon appears. In IE11, Font Awesome icons only appear when I specify it in the HTML.
Anyone know a fix or workaround to this issue?