Font Awesome icon size not increasing - html

I have Font Awesome icons installed on this site. The icons size isn't increasing even after adding the class to increase size.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
</ul>

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
</ul>

font-awesome icons are texts. So use font-size to increase the size of font-awesome icons.
For eg.,
i {
font-size: 18px;
}

For font awesome icons sizing please check this link.
http://fontawesome.io/examples/
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<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

I had the same problem. For some reason the fa class is overriding the fa-2x class on the awesome font library. I found a blog that they knew it was an issue back in 2014 but haven't addressed it yet. On my site I added the style class again and added !important which fixed my problem.
<style>
.fa-2x{
font-size:2em !important;
};
</style>

use following inline css
<style type="text/css">
.fa-3{
font-size: 30px;
}
</style>

if you are using font awesome or font awesome pro icons in Angular 5+ using svg with Javascript. The easy way to increase your custom font size is:
.svg-inline--fa{
font-size:1.500em; //use your custom font size. If you do not want to apply the font awesome size classes
}
Apply this in your custom component to see the changes immediately.

In my case setting fa fa-5x, or font-size or height didn't help, but:
width: 20px !important; // 20px is an example value
Also be cautious if you have padding applied!

Related

How do i change an icon property size using CSS? [duplicate]

This question already has answers here:
increase font awesome icons
(4 answers)
Closed 2 years ago.
i am try to make an icon bigger with CSS properties, how do i do this please? i have tried the height and font-size properties, neither work. code below so far:
<i class=
"icon2 fa fa-twitter-square">
</i>
.icon2 {
margin:2px 3px 10px 3px;
}
Looks like you are using Font Awesome and actually font-size property should work. Anyway, This documentation explains a different way. Browse to the Larger Icons header and it says:
To increase icon sizes relative to their container, use the fa-lg (33%
increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
Examples from the documentation:
<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

Facebook and Twitter icons don't work, others do

Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>

Have Two Font Awesome Icons Side by Side

I'm trying to have two Font Awesome icons side by side, but it's not working. They're on top of each other.
Here's my code:
<i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
<i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
I've tried setting my a and i tags as display: inline;
If you want to do it using CSS, the above way would be recommended.
However, if you want to do it an easier way using HTML you can do it by using a table
i{
padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<table>
<tr>
<td><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></td><td><i class="fa fa-phone fa-3x" aria-hidden="true"></i></td>
</tr>
</table>

How to add different icon for li list?

now how can i add my own img for a UI list (nav bar)?
Im trying to add my own icon/imgs for each ul list
my current code:
<li> <i class="fa fa-car"></i> אזורי חלוקה</li>
<img src="images/United-States-Flag-24.png" alt="US ENG" title="US English" />
<li> <i class="fa fa-envelope-o"></i> צור קשר</li>
<li><i class="fa fa-shopping-cart"></i> חנות</li>
Here is an example from the font awesome page:
http://fortawesome.github.io/Font-Awesome/examples/
first your code above does not include the ul tag, not sure if you forgot it or did not include it
the use of <i> tags is right, but maybe you did not included the font awesome in your header?
try this example and see if you get the icons to appear. I can edit this base on your feedback
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Font Awesome: how to only increase the width of an icon?

I would like to only increase the width of the following icon:
<i class="fa fa-bars"></i>
I don't want to use things such as the following:
<i class="fa fa-bars fa-2x"></i>
<i class="fa fa-bars fa-3x"></i>
because the icons also increases in height.
Thanks and regards.