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/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I can't load icons from font awesome in pseudo-element. I tried to follow the docs but it didn't work.
.x::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
.x::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<p class="x">hello, my name is john</p>
Adding the font-awesome stylesheet to your code and it will load the icon.
.x::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
.x::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>
I think you haven't installed fontawesome kit in your html.
please go here and enter your email address. They will send a verification email and then you will be provided to a link where you will find the <script> tag provided by them. copy and paste that in your html file.
ok this problem is really easy to solve:
First thing you have to create a span tag between the tags:
Correction: no need for span tag.
<p class="icon-classname">hello, my name is john</p>
Also another thing you have to remember is to use the link for the font-awesome in your HTML file with this link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
and in the css file:
icon-classname::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
You do not need span tag to use the font-Awesome, probably the only thing that was missing in your code is the link from font-awesome.
You should probably explore this article
Sometimes the problem is simple ::before vs :before
I recommend that you try using :before. Everything else points out that your code should be working fine.
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
After applying the below codes, the font awesome icons show up as squares. If I apply it to body tag. It doens't overwrite all font-family, so I had to apply it to *. How can I fix this error?
<style>
* {
font-family: "Open Sans", sans-serif !important;
}
</style>
This is because font awesome requires the FontAwesome font-family to be applied to icon elements, in order to source and render the icons correctly.
Your styles are likely overwriting this FontAwesome behaviour.
One way to fix this would be to ensure font awesome's .fas class still correctly applies the required FontAwesome font to .fas elements. You could do this by updating your CSS:
<style>
* {
font-family: "Open Sans", sans-serif;
}
.fas {
font-family:FontAwesome;
}
</style>
Or, if your browser supports the :not CSS3 selector:
<style>
*:not(.fas) {
font-family: "Open Sans", sans-serif;
}
</style>
If you are using Font Awesome 5 You can use this
.fab
{
font-family: 'Font Awesome 5 Brands' !important;
}
.fas, .far, .fa
{
font-family: 'Font Awesome 5 Free' !important;
}
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
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