How to change icon size in Bootstrap

In this article you will learn how to change the size of the icon in Boostrap, in an easy and fast way without any hacks, using pure CSS.

Hey you programmer, ok? Let’s learn something new!

A great facility that frameworks/libs like Bootstrap provide us are the icons

Today Bootstrap uses an external library, that is, the icons are not native to it.

Note: In version 4, it has a chance to become native

But what I mean by that is that you are probably using Font Awesome, or another icon font

And an icon font is the same thing as a letter font

And what does it mean? That just increase the font-size with CSS or even add other styles like color, which will work exactly the same way as if it were a letter

See an example:

.fas.fa-anchor {
 font-size: 30px;
 color: red;
}

In this case, for example, we changed the anchor icon to a size of 30px and also a red color

And that way you can change your icons too, just identify the CSS class and apply the rule

See that there is no mystery, as if you were going to change the style of a <p> tag that is pure text

Also change your icons, the styles will work the same

Conclusion

In this article we learned how to change the icon size in Boostrap

And it’s very simple, we just apply the same styles as the letter font

For example to increase size: font-size, if to change color: color, background color: background-color and so on

Take your tests and see how easy it is to make these changes to the icon fonts