Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do I change Glyphicons?

If you need to change the size of glyphicons, use the CSS font-size property. In this snippet, we'll show some examples and explain them. Let's start with an example, where we increase all the glyphicons and set their font-size to 50px.

How do I make bootstrap icons bigger?

Larger icons 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. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.


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;
}

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>  

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>

Yes, and basically you can also use inline style:

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

try to use heading, no need extra css

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