Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make icon small when using bootstrap?

Tags:

css

If I want to minimize icon size, how can I make icon small when using bootstrap?

This is demo http://jsfiddle.net/AqUBu/

I'd like to minimize the size of this human icon.

enter image description here

<span class='badge badge-success'><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i></span>
like image 958
MKK Avatar asked Jan 23 '13 04:01

MKK


People also ask

How do I change the size of the icons in bootstrap?

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

How do I reduce the size of an icon in HTML?

To use an icon, just add the name of the icon to the class of an HTML <i> element. To control the size of the icon, change the font-size property of the icon, or use the w3-size classes: w3-tiny. w3-small.

How do you change icon size in CSS?

To increase the size of icons relative to its container, use icon-large , icon-2x , icon-3x , or icon-4x . Increase the icon size by using the icon-large (33% increase), icon-2x , icon-3x , or icon-4x classes.

How do I make my bootstrap 5 icon bigger?

bootstrap icon size To increase icon sizes relative to their container, use the fa-xs, fa-sm, fa-lg (33% increase), fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x classes.


2 Answers

If you are using Bootstrap 3, you can use the <small> tag, like this: <small><span class="glyphicon glyphicon-send"></span></small> It works perfectly with Bootstrap 3.

like image 134
Mrinal Avatar answered Nov 13 '22 03:11

Mrinal


Glyphicons and other icons can be re-sized precisely with the CSS property font-size:

You know... being glyphs and all.

like image 23
Danny Mahoney Avatar answered Nov 13 '22 04:11

Danny Mahoney