250

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>  
1

7 Answers 7

394

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;
}
4
  • 2
    text-center on the div.
    – Aibrean
    Jul 25, 2014 at 17:37
  • 7
    to make the glyphicon larger "on demand" use .glyphicon.larger { font-size: 150%; }
    – user216661
    Apr 14, 2016 at 2:02
  • What about making it thinner?
    – localhost
    Feb 2, 2017 at 10:49
  • I had to add !important; to the font size to override the boostrap CSS. Jan 7, 2019 at 14:56
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>  
2
  • Nice! You can also use fractional amounts like 1.5em. Jan 7, 2016 at 0:55
  • Much better than the accepted answer and shows a generic solution to a recurring problem.
    – Adam
    Dec 6, 2017 at 15:09
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>
3
  • Glyphicons and Font-Awesome join forces!
    – Timo
    Sep 30, 2017 at 7: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, 2018 at 4: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, 2018 at 18:14
20

Yes, and basically you can also use inline style:

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

try to use heading, no need extra css

<h1 class="glyphicon glyphicon-plus"></h1>
2
  • 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, 2015 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, 2015 at 15:18
10

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

1
  • 8
    The question regarded the images, not the images as buttons.
    – user216661
    Apr 14, 2016 at 1:45
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.