Bootstrap glyph icons: How to increase size with 3 demos

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:


bootstrap glyph icon

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.

An example of increasing glyph icon size in buttons

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:

bootstrap glyph icon size

See online demo and code

The CSS for this demo:


The markup:


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.

A demo of increasing size in span tags

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:

bootstrap glyph icon span

See online demo and code

The code:


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:

bootstrap glyph icon inline css

See online demo and code

The markup:


If you are using font-awesome then it has classes like fa-5x, fa-4x etc. for bigger size icons.