How can I make icon small when using bootstrap?

Question

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

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>

@Pawan Thanks I use bootstrap. it's way too long so that I had to use JSFiddle to put them all. Please check my demo — MKK, Jan 23 '13 at 05:00
consider awe's answer http://stackoverflow.com/a/1341462/1135581 — Rahul, Jan 23 '13 at 05:02
I tried them to wrap with `background-size: 50% 50%;` but it didn't work:( — MKK, Jan 23 '13 at 05:11

score 36 · Answer 1 · edited Oct 17 '16 at 05:00

36

If you are using Bootstrap 3, you can use the  tag, like this:  It works perfectly with Bootstrap 3.

edited Oct 17 '16 at 05:00

Danny Mahoney

1,255
2
13
24

answered Feb 12 '14 at 13:57

Mrinal

464
5
3

Danny Mahoney · Answer 2 · 2016-07-11T04:39:01.480

24

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

You know... being glyphs and all.

edited Jul 11 '16 at 04:39

answered May 09 '16 at 04:51

Danny Mahoney

1,255
2
13
24

score 8 · Answer 3 · edited Apr 19 '16 at 13:21

8

You can use class="btn btn-xs"

Reference: https://getbootstrap.com/components/

edited Apr 19 '16 at 13:21

Jiri Tousek

12,211
5
29
43

answered Apr 19 '16 at 13:18

sssimon

103
1
7

these are no btn-xs styles in bootstrap doc, as well as `class="btn btn-xs"` doesn't work – Mohamed Raza Oct 27 '21 at 14:24

score 3 · Answer 4 · answered Sep 02 '16 at 13:50

From http://getbootstrap.com/css/#small-text

Small text

For de-emphasizing inline or blocks of text, use the  tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested  elements.

You may alternatively use an inline element with .small in place of any .

Try:

<span class='badge badge-success small'>
  <i class='icon-user icon-white'></i>
  <i class='icon-user icon-white'></i>
  <i class='icon-user icon-white'></i>
</span>

score 1 · Answer 5 · answered Apr 30 '18 at 05:19

None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:

<button class="btn btn-sm btn-secondary ">
    <i class="fa fa-pencil"></i>
</button>

Bootstrap 4 button documentation (#Sizes)

If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.

How can I make icon small when using bootstrap?

5 Answers5