How Do I Make Glyphicons Bigger? (Change Size?)

Question

I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do this?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>

Possible duplicate of [Bigger Glyphicons](https://stackoverflow.com/questions/18478365/bigger-glyphicons) — Kevin Workman, Aug 05 '17 at 23:03

VenomVendor · Accepted Answer · 2014-07-25T17:02:05.643

392

Increase the font-size of glyphicon to increase all icons size.

.glyphicon {
    font-size: 50px;
}

To target only one icon,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

edited Jul 25 '14 at 17:02

answered Jul 25 '14 at 16:23

VenomVendor

15,064
13
65
96

2

`text-center` on the div. – Aibrean Jul 25 '14 at 17:37
7

to make the glyphicon larger "on demand" use .glyphicon.larger { font-size: 150%; } – user216661 Apr 14 '16 at 02:02
What about making it thinner? – localhost Feb 02 '17 at 10:49
I had to add `!important;` to the font size to override the boostrap CSS. – MeanwhileInHell Jan 07 '19 at 14:56

score 147 · Answer 2 · answered Nov 26 '14 at 20:14

147

Fontawesome has a perfect solution to this.

I implemented the same. just on your main .css file add this

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

In your example you just have to do this.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>

answered Nov 26 '14 at 20:14

Mr. Crowley

3,225
4
25
28

Nice! You can also use fractional amounts like 1.5em. – Mike Taverne Jan 07 '16 at 00:55
Much better than the accepted answer and shows a generic solution to a recurring problem. – Adam Dec 06 '17 at 15:09

Ali Adravi · Answer 3 · 2015-09-04T16:14:54.913

75

If you are using bootstrap and font-awesome then it is easy, no need to write a single line of new code, just add fa-Nx, as big you want, See the demo

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

edited Sep 04 '15 at 16:14

answered Aug 29 '15 at 16:28

Ali Adravi

21,707
9
87
85

Glyphicons and Font-Awesome join forces! – Timo Sep 30 '17 at 07:19
1

I am not in favour of combining FA and Glyphicons. See below answer on how to upsize the glyphicon using inline style or via a css class above. Or for a pure FA solution use -> fa fa-globe fa-2x ( v4.x) – MarcoZen Apr 24 '18 at 04:51
MarcoZen: anyway by next version of bootstrap 4 Glyphicons are going to be removed, many of us earlier were using together. – Ali Adravi Apr 25 '18 at 18:14

score 20 · Answer 4 · edited Oct 11 '17 at 15:06

20

Yes, and basically you can also use inline style:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

edited Oct 11 '17 at 15:06

Flea

11,176
6
72
83

answered Dec 14 '16 at 09:49

Terje Solem

816
1
10
25

score 11 · Answer 5 · answered Apr 22 '15 at 13:29

11

try to use heading, no need extra css

<h1 class="glyphicon glyphicon-plus"></h1>

answered Apr 22 '15 at 13:29

Bagus Cahyono

668
2
8
17

3

You can do this, but it doesn't give you a fine level of control the way a little bit of CSS would. – MattD Apr 22 '15 at 20:57
7

Using headers because of their effect on font-size is an anti-pattern. A user navigating your site by keyboard would be sent straight to your icon as the screen reader assumes it signifies a title/heading for the most important content on the page. – Roy Jul 24 '15 at 15:18

score 10 · Answer 6 · answered Jan 28 '16 at 05:00

For ex .. add class:

btn-lg - LARGE

btn-sm - SMALL

btn-xs - Very small

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>

Ref link Bootstrap : Glyphicons Bootstrap

The question regarded the images, not the images as buttons. — user216661, Apr 14 '16 at 01:45

score 0 · Answer 7 · answered Aug 06 '17 at 01:05

0

I've used bootstrap header classes ("h1", "h2", etc.) for this. This way you get all the style benefits without using the actual tags. Here is an example:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

answered Aug 06 '17 at 01:05

Alex Kozlov

21
2

How Do I Make Glyphicons Bigger? (Change Size?)

7 Answers7

Linked