Использование глификона вне бутстрапа

Question

Как использовать glyphicon без использования бутстрапа?

Мне нравится один конкретный глификон. Это называется глификон-шеврон-левый. Все это дает это
<span class="glyphicons glyphicons-chevron-left"></span>

Я скачал бесплатную версию и нашел .png мне нужно и использовать его в качестве такового:

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

Но тогда, когда я даю эту высоту и ширину кнопки изображение теряет качество. Мне было интересно, есть ли способ сделать это лучше?

Answer 1

У вас есть три варианта, кроме тех, которые вы уже пробовали.

SVG Вы можете использовать SVG изображение, а не PNG, который не будет pixellate, как вы сделаете его больше или меньше, как сво вектор.

Недостатком этого является то, некоторые старые браузеры не поддерживают SVG (IE 8 и ниже я верю)

FontAwesome семьи/Другое значок шрифта

Это кросс-браузер совместим, так что вы выиграли» У меня есть эта проблема. Однако вам придется загружать весь шрифт только для использования одного символа. Что, вероятно, не идеально. Тем не менее, он по-прежнему лучше, чем загрузка во всей библиотеке bootstrap css.

Настройка Bootstrap

В качестве альтернативы вашего третьего варианта направиться на сайт бутстрэпов и customise your build и просто включить иконки glyphicons.

Answer 2

Это потому, что Glyphicon - это шрифт: один файл, содержащий все значки в специальном векторном формате, который позволяет изменять размер (если вы измените размер png-изображения, он станет уродливым). Вы можете скачать Glyphicons на своих website или даже создать свой собственный набор иконок, если вам нужны только некоторые из них, используя инструмент Icomoon (возможно, Icomoon не предлагает выбирать значки из Glyphicons, но вы наверняка найдете эквивалентные значки в других наборы).