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.
Related
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
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>
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!
I didn't find how to stack icon moon from FA :
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-moon fa-stack-1x fa-inverse"></i>
</span> sleep
JSFiddle demo: http://jsfiddle.net/myYUh/90/
Icon is hidden, we only see the square :/
You have two problems here. The first is a typo: Font Awesome has no fa-moon icon, however it does have a fa-moon-o icon:
Once you've fixed that, the next problem is that the fa-inverse class gives your fa-moon-o icon a colour of #fff (white), which makes it invisible on top of the white page background which you see through the fa-square-o icon.
Unless your own page has a background which isn't white, to fix this, either remove the fa-inverse class:
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-moon-o fa-stack-1x"></i>
</span> sleep
JSFiddle demo.
Or change fa-square-o to fa-square:
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-moon-o fa-stack-1x fa-inverse"></i>
</span> sleep
JSFiddle demo.
link: http://perlabeautysalon.com
Im trying to create a square background (with font awesome) and stack a users icon on top of it.. however, for some reason.. it wont display right.. one icon is below the other...
heres my code
<span class="fa-stack" style="color:#EA5555">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
I think you code is fine, I'm just not sure why you have "br" tags:
<span style="color:#EA5555" class="fa-stack"><br>
<i class="fa fa-square fa-stack-2x"></i><br>
<i class="fa fa-users fa-stack-1x fa-inverse"></i><br>
</span>
When I remove them in your site using Firebug - the icon seems to be what you need.