The glyph icons in Bootstrap
If you are using Bootstrap CSS in your web project then you may use glyphicons without referring any other CSS file. The glyph icons are the part of it.
However, you have to manage the size of icons if using in <span> or some other tags. If you are using icon in a button then size of icon adjusts with the class like btn-lg, btn-xl, for example:
<button type="button" class="btn btn-primary btn-sm">Save <span class="glyphicon glyphicon-floppy-save"></span></button> <button type="button" class="btn btn-danger btn-lg">Save <span class="glyphicon glyphicon-floppy-save"></span></button> <button type="button" class="btn btn-info btn-xs">Save <span class="glyphicon glyphicon-floppy-save"></span></button><br /><br /> <button type="button" class="btn btn-success btn-block">Save <span class="glyphicon glyphicon-floppy-save"></span></button>
See online demo and code
What if you want to increase the size of the icon inside a button or in a span or some other tag? See online examples in the section below for doing that.
One of the ways is to use the font-size property either in inline CSS in span tag containing the icon or create a class in style section or external CSS file.
See this demo where I used font-size in the style section under the <head> tag and applied to all four buttons by using the class name:
See online demo and code
The CSS for this demo:
.icon-size{
font-size:30px;
}
The markup:
<div class="container"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary btn-sm">Download <span class="glyphicon glyphicon-download icon-size"></span></button> <button type="button" class="btn btn-danger btn-lg">Download <span class="glyphicon glyphicon-download icon-size"></span></button> <button type="button" class="btn btn-info btn-xs">Download <span class="glyphicon glyphicon-download icon-size"></span></button><br /><br /> <button type="button" class="btn btn-success btn-block">Download <span class="glyphicon glyphicon-download icon-size" ></span></button> </div> </div> </div> </div>
You can see, the CSS class specifying the font-size is used in the span elements that contains glyph icons. It increased the size of icons only.
If icons are not contained in buttons but standalone in a span or other tag, you may increase the size in a similar way. Have a look:
See online demo and code
The code:
<style>
.icon-size{
font-size:3em;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Normal size icons</h3>
<a href="#"><span class="glyphicon glyphicon-remove"></span></a>
<a href="#"><span class="glyphicon glyphicon-ok"></span></a>
<span class="glyphicon glyphicon-home" ></span>
<a href="#"><span class="glyphicon glyphicon-trash"></span></a>
<a href="#"><span class="glyphicon glyphicon-signal"></span></a>
<span class="glyphicon glyphicon-off"></span>
</div>
<div class="col-md-4">
<h3>Bigger size icons</h3>
<a href="#"><span class="glyphicon glyphicon-remove icon-size"></span></a>
<a href="#"><span class="glyphicon glyphicon-ok icon-size"></span></a>
<span class="glyphicon glyphicon-home icon-size" ></span>
<a href="#"><span class="glyphicon glyphicon-trash icon-size"></span></a>
<a href="#"><span class="glyphicon glyphicon-signal icon-size"></span></a>
<span class="glyphicon glyphicon-off icon-size"></span>
</div>
</div>
</div>
</div>
You can see, the .icon-size class is given in the span tag for increasing the size of icons.
Using inline style tag example
Using the same set of icons, see how the style tag is used to increase the size of icons:
See online demo and code
The markup:
<div class="col-md-4"> <h3>Bigger size icons with inline CSS</h3> <a href="#"><span style="font-size:25px;" class="glyphicon glyphicon-remove"></span></a> <a href="#"><span style="font-size:30px;" class="glyphicon glyphicon-ok"></span></a> <span style="font-size:35px;" class="glyphicon glyphicon-home" ></span> <a href="#"><span style="font-size:40px;" class="glyphicon glyphicon-trash"></span></a> <a href="#"><span style="font-size:30px;" class="glyphicon glyphicon-signal"></span></a> <span style="font-size:25px;" class="glyphicon glyphicon-off"></span> </div>
If you are using font-awesome then it has classes like fa-5x, fa-4x etc. for bigger size icons.