How to change the size of fontawesome icon in bootstrap 5?

How to add and change the size of fontawesome icon in bootstrap 5?

Last updated:1/4/2022 6:29:20 AM

1 Answers

Manish Manish
Manish Manish

What is Font Awesome icon:

 Font Awesome icon is an icon as like image that gives you scalable vector image that can be customized with CSS. There are greater the thousands number of icons are available for free used in html code. You can easily use font awesome icon as which type icon you want in your bootstrap html code. You can download different icons, Click here…

Resize the Font awesome icon:

 To change the size of font awesome icon in bootstrap then bootstrap provide inbuilt class the resize the icon, only you need to add them and define the size of that icons.

There are 5 specific size of icons you can use in your bootstrap code which are,

fa-1x(default), fa-2x, fa-3x, fa-4x, fa-5x.

Example-

  <body>

  <div class='container-fluid'>
    <p>Default size of icon is like as</p>
    <p class='text-dark'><i class='fa fa-users'></i></p>
  </div>
</body>

If you want to resize the icon then you can define the size in bootstrap <i> tag class like as,

<body>

  <div class='container-fluid'>
    <p>Defaul size of icon is like as</p>
    <p class='text-dark'><i class='fa fa-users fa-3x'></i></p>
  </div>
</body>


Answer