在引导程序之外使用glyphicon

Question

How does one use a glyphicon without using bootstrap?

I like one particular glyphicon. It's called glyphicons-chevron-left. All it gives is this
<span class="glyphicons glyphicons-chevron-left"></span>

I've downloaded the free version and found the .png I needed and used it as such:

<input type="image" src="images/glyphicons-chevron-left.png" class = "back_btn"/>

But then, when I give this button height and width the image loses quality. I was wondering if there is a way to do it better?

Answer 1

This is because Glyphicon is a font: one file containing all the icons in special vector format which allows resizing (if you resize a png image it will become ugly). You can directly download the Glyphicons on their website or even create your own set of icons if you only need some by using a tool like Icomoon (maybe Icomoon does not offer to select icons from Glyphicons, but you will surely find equivalent icons in other sets).

Answer 2

You have three options other than the one you have already tried.

SVG

You can use an SVG image rather than a PNG, which will not pixellate as you make it bigger or smaller as its a vector.

The disadvantage of this is some older browsers don't have SVG support (IE 8 and below I believe)

FontAwesome / Other icon font family

These are cross browser compatible so you won't have that problem. However you will have to load in an entire font just to use one character. Which probably isn't ideal. It is still better than loading in the entire bootstrap css library though.

Customise Bootstrap

Alternatively your third option is to head over to bootstraps website and customise your build and just include the glyphicons icons.