forum

Home / DeveloperSection / Forums / How to change the size of fontawesome icon in bootstrap 5?

Ask Question

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

Steilla Mitchel52604-Jan-2022

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

bootstrapbootstrap 
Updated on 04-Jan-2022
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Manish Sharma

Manish Sharma

06-Jan-2022

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>


Liked By