I have the following code:
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
it shows an image and a short text. It works fine but the text is in a serif font. How can I switch to a sans serif font?
I'm using Bootstrap 4 and Fontawesome 5.8.1
Edit 1:
I added
font-family:sans-serif !important
to the .fa class. But then the icon is visible as an rectangle (which is wrong).
Edit 2:
I added two new classes:
.span {
font-family:Sans-Serif
}
.sansserif {
font-family:Sans-Serif
}
and added the .sansserif to the span-element:
<span class="card-text card-textWithIcon sansserif">serif font</span>
But this did not work.
Solution: see second comment from elveti
"You should not add additional content into your icon. Put it afterwards, like serif font – elveti 2 mins ago"
You should use Font Awesome as font family for all i tags then Sans-Sarif for everything else or what you want to use it for
i.fas {
font-family: 'Font Awesome\ 5 Free' !important;
font-style: none
}
* {
font-family:Sans-Serif;
}
Try the below method. You can set the font-family to root element or body tag.
body {
font-family:Sans-Serif;
}
a .fas {
font-family: "Font Awesome 5 Free";
}
.card-text {
font-family: Sans-Serif;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
Related
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
I added the following style to the code below :
style="display: inline-block; background-color: transparent; background-image: none; font-family: fontAwesome; content: "\f0c9";"
Code:
<li class="treeview">
<a href="#">
<i style="display: inline-block; background-color: transparent; background-image: none; font-family: fontAwesome; content: "\f0c9";" class="fa fa-dashboard"></i> <span>Exit</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu" id="sign_Out">
<li class="active"><i class="fa fa-circle-o"></i>Exit</li>
</ul>
</li>
The font-awesome file is defined in the css style , Why does not the icon appear?
Error in Inspect google chrome : "invalid property value" and on the content word , line is drawn
Well, you should use the following to import font awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
For more details about how to use icons check the following link:
https://www.w3schools.com/css/css_icons.asp
EDIT:
in 4.7 version a circle appear, however moving to 5.7 version made the circle disappear so you should be careful what version you using
"\f0c9" is breaking the inline style declaration since it is already wrapped in double quotes. Using '\f0c9' should help.
I have e very big data and i want to give class dynamically by state.
"<td>
<i class='fullPassengerListState_" + data[i].State + "'>"
+ data[i].State + "
</i>
</td>"
I want this
fullPassengerListState_1 class should be fa-check (Font Awesome)
fullPassengerListState_0 class should be fa-times (Font Awesome)
I don't want to use if ( data[i].state == 0 ) or something like that.
Simply do it in css by pesudo :before to .fullPassengerListState_1/0:
NOTE!
I use to the example Font Awesome 5
.fullPassengerListState_1:before{
content:'\f00c';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.fullPassengerListState_0:before{
content:'\f00d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<i class='fullPassengerListState_0'> state 0
</i>
<i class='fullPassengerListState_1'> state 1
</i>
I need font awesome much thicker. Trying to increase only height for default icons. Something like that as in picture for icon
<i class="fa fa-exchange" aria-hidden="true"></i>
I already try all bold property's and font awesome classes like fa-4x or fa-5x these are not suitable for me. And height property of css not work.
How to increase height of font awesome icon?
.my-link i{
color:red;
height:50px;
}
try ccs property:
transform: scale(1, 7);
.fa { transform: scale(1,7); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
<br/><br/><br/><br/><br/><br/>
<i class="fa fa-exchange fa-5x" aria-hidden="true"></i>
you can use this css for make bold.it's work on chrome
.my-link i{
-webkit-text-stroke: 4px;
}
I've imported all the font awesome css into my website using the following link code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />
And then added the icons using:
<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a>
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>
My custom CSS is:
#font-face {
font-family: 'headline_onehplhs';
src: url('fonts/HEADOH__-webfont.eot');
src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HEADOH__-webfont.woff2') format('woff2'),
url('fonts/HEADOH__-webfont.woff') format('woff'),
url('fonts/HEADOH__-webfont.ttf') format('truetype'),
url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-image: url('../images/background.jpg');
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.heading {
background-color:#FFF;
font-family: 'headline_onehplhs';
font-size:3.5em;
margin-left:50px;
margin-top:50px;
padding:20px;
color:#000;
}
.heading span, .main span {
background-color:#FFF;
font-family: 'headline_onehplhs';
color:#999;
font-size:0.5em;
display:block;
}
.main span {
font-size:1.75em;
}
.main {
background-color:#FFF;
margin-left:50px;
margin-top:25px;
padding:20px;
text-align:justify;
}
My directory is laid out as follows:
css > font-awesome > [font awesome folders]
And the container that I'm using has the class name "main"
But the icons still display as square boxes - is there something I'm missing?
Try to use <i class="fa fa-twitter"> rather than <span class="fa fa-twitter">
On the official doc:
After you get up and running, you can place Font Awesome icons just
about anywhere with the <i> tag.
It also says:
You can place Font Awesome icons just about anywhere using the CSS
Prefix fa and the icon's name. Font Awesome is designed to be used
with inline elements (we like the <i> tag for brevity, but using a
<span> is more semantically correct).
Although it sounds like using <span> is also acceptable, but it does not work correctly in some cases, so stay with <i> is a safer plan.
Use this instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
If that fixes your problem, then you either didn't upload the fonts in the correct directory or you are referencing them incorrectly.
Here is a test showing the minimum code required to use font awesome:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Noone has mentioned the font folder in relation to the fonts. Think like why in you have to put ../ in front of background image to let it know that the img Is not contained in the CSS folder. Check the font-awesome.css file and see where it Is referencing the fonts.
Maybe like this?
HTML link
<link href='content/css/font-awesome/css/font-awesome.css?family=font+awesome' rel='stylesheet' type='text/css'>
CSS
fa{
font-family: 'font awesome';
}
Source: similar use
http://www.google.com/fonts#QuickUsePlace:quickUse
in AspNetCore (.net 7), I had this problem showing a box instead of the fontawesome icon. I'm using NPM to gulp the package and copy to wwwroot/css/fontawesome. After adding the correct links to the _Hosts.cshtml everything looks good.
<link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/css/fontawesome/css/solid.css" rel="stylesheet" />
In development mode, I noticed 404 on the webfont files. After more research, I found that the mime types were not configured properly. Adding the following to program.cs, the problem is solved:
app.UseHttpsRedirection(); //Existing
// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".ttf"] = "font/ttf";
provider.Mappings[".woff"] = "font/woff";
provider.Mappings[".woff2"] = "font/woff2";
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = provider
});
app.UseRouting(); //Existing