Twitter bootstrap bigger glyphicons.

Question

Is there a way to use the twitter bootstrap and adjust there size to be bigger ? I have tried this so far with no luck. glyphicon.myclass {height: 100px; width: 100px;}

Thank you.

For bootstrap 2, please see this thread http://stackoverflow.com/questions/17311231/font-awesome-vs-glyphyicons-in-twitter-bootstrap/17319709#17319709 — Ravimallya, Dec 04 '13 at 18:33

score 4 · Accepted Answer · answered Dec 04 '13 at 18:27

4

If it's Bootstrap 3, then try increasing the font-size if it applies to the element. Example below.

glyphicon.myclass {
    font-size: 1.4em;
}

answered Dec 04 '13 at 18:27

Shiva

20,575
14
82
112

isherwood · Answer 2 · 2014-12-05T14:16:46.467

2

Bootstrap 2 icons are applied as backgrounds, so no. Also, they're an image sprite, so resizing the sprite image would require you to adjust every CSS position statement.

Bootstrap 3 icons are a font, so yes.

.glyphicon.smaller {font-size: 8px;}
.glyphicon.bigger {font-size: 30px;}

edited Dec 05 '14 at 14:16

answered Dec 04 '13 at 18:24

isherwood

58,414
16
114
157

score 2 · Answer 3 · answered Dec 04 '13 at 18:46

2

Glyphicons use the font-size of their container. So you can increase the font-size as suggested by others, or use a container with larger font..

<h1><i class="glyphicon glyphicon-align-center"></i></h1>

http://bootply.com/98574

answered Dec 04 '13 at 18:46

Carol Skelly

351,302
90
710
624

It's worth noting that, while this works nicely, it encourages non-semantic markup. Headings, for example, should not be used to style icons and text, but to structure the document logically. – isherwood May 16 '14 at 13:19
1

Although implemantation is easy, w3c validator gives `Empty heading` warning for this. http://stackoverflow.com/questions/23739224/empty-heading-warning-on-html5-validation – trante Jul 16 '14 at 17:51

Twitter bootstrap bigger glyphicons.

3 Answers3