Resizing a Glyphicon

If you ever tried Bootstrap, We're sure you've heard about this Glyphicons. According to the title of the webpage, Glyphicons is a library of monochrmaitc icons and symbols. To put it simply and in my own perspective, Glyphicons is a library of vector graphics that are commonly used in webpages. Vector Graphics on the other hand are widely known as images that doesn't go pixelated when resized.

Back to the main topic, as we have been working on modifying a Bootstrap template the other week was a sudden query about how to resize these glyphicons. Of course it was simple but unfortunately, all we could think about is through CSS. Yes, Cascading Style Sheets or what was abbreviated as CSS. Since the whole designing part of HTML could be done simply and neatly through this, we could definitely say that this is the proper place to do this but since it's hard coded, we could just adjust it the way we adjust texts.

So here's a short and brief example on adjusting the size of a Glyphicon.

Standard Glyphicon Code:

<i class="glyphicon glyphicon-icon-name"></i>

Resized Glyphicon Code:

<h1> <i class="glyphicon glyphicon-icon-name"></i> </h1>
<h3> <i class="glyphicon glyphicon-icon-name"></i> </h3>

Whatever your choice is, just use the Heading tag or use a CSS Class to modify its size and it'll surely adjust the way you want it to be. There might be other ways to do this but as we see it, this is the most convenient and easiest way we could think off.

Personally, I'm using the Heading Tag method since there are times that my CSS interferes with my adjustments in HTML. So, that's it. I hope this could be useful in anyway possible. 'Til the next post!