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;
}
Related
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>
I'm trying to make these social media icons larger in my Wordpress menu.
I used this code as a custom link in the menu:
<i class="fa fa-instagram"></i>
fa stands for FontAwesome, so your icons are a font. You can change their size by using font-size in your CSS.
just add font size to parent HTML tag. It'll works.
a { font-size: 100px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-instagram"></i>
While spinning fa-spinner sometimes shows a line around the spinner circle. Glitch seems to appear only in firefox (im using 44.0.2 version). Here's some fiddle:
#spinner {
font-size: 56px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-spinner fa-pulse" id="spinner"></i>
I have 3 font-awesome icons side-by-side in a dev tag. On mobile there were a bit too small. I put this in my code but this specific icon doesn't change size?
<i class="fa fa-heart fa-2x"></i>
And here's how they look:
CSS:
hover-info .fa .fa-heart {
font-size: 2em;
}
This is working in my browser:
.fa-heart {
font-size: 4em;
}
Maybe your reference to 'hover-info' is causing the issue.
NOTE: your 'css' file has to be loaded after fontawesome.
Another option if you don´t want to define a css class, is this way:
<font size="8"> <i class="fa fa-facebook"></i> </font>
Then it only remains to change the number of the font tag.
In my case this worked very well, I hope that in yours too.
Regards
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