Font Awesome vs Glyphicons в Twitter Bootstrap


81

Я новичок в веб-разработке и недавно начал работать с Twitter Bootstrap, я знаю, что он использует глификоны, которые я уже знаю, как использовать. Но я также наткнулся на Font Awesome, в котором говорится, что он создан для Bootstrap.

В чем разница между ними? Я имею в виду, является ли одно альтернативой другому? Или использовать их в разных местах?

Ответы:


66

В Bootstrap 2.xx Glyphyicons были в формате изображения, поэтому вы не можете легко увеличить размер, изменить цвет, цвет фона и т. Д. Однако font-awesome предоставляет масштабируемые векторные иконки, которые можно мгновенно настраивать - размер, цвет, тени и все, что можно сделать с помощью CSS.

Font-awesome - действительно альтернатива Glyphyicons, который время от времени обновляется новыми значками. Fat и Mdo планируют интегрировать Font-awesome в бутстрап версии 3 в качестве замены Glyphyicons.

Я предлагаю вам использовать bootstrap с font-awesome. Сначала включите bootstrap css, а затем Font-awesome css, чтобы Glyphyicons переопределил font-awesome.

ОБНОВИТЬ

В начальной загрузке версии 3.xx глификоны становятся форматом шрифта, который будет хорошо отображаться даже при размере шрифта 12 пикселей. Если вы используете последнюю версию fontawesome, то есть 4.01, вы можете использовать оба глификона с fontawesome.


19
+1, но интеграция с Font Awesome не была реализована в Bootstrap 3. FA официально не связан с twitter, за исключением поддержки Bootstrap 2 из коробки. Вот сравнение различных пакетов значков шрифтов, которые поддерживают загрузку.
jrhorn424

2
Обновление: Bootstrap 4 больше не отправляет глификоны.
MushyPeas

FontAwesome заявляет, что он на 100% бесплатен даже для коммерческого использования. Глификоны имеют некоторые ограничения: «Глификоны Халфлинги обычно не доступны бесплатно». Я не знаю о «шрифтах материалов Google», но для некоторых продуктов (модуль js charts) вы не можете разместить его самостоятельно и можете только связать его со своей CDN.
Андрей

в чем преимущество использования векторных значков, которые идут с потрясающим шрифтом. какой тип изображений используется для глификонов?
Monojit Sarkar 07

@Ravimallya, вы сказали, что размер и цвет значка глифа изменить нельзя. Я не знаю, в каком контексте вы это сказали. Я обнаружил, что размер и цвет можно изменить. вот пример -----> изменение цвета значка глифа -> несколько образцов <span class = "glyphicon glyphicon-user" style = "color: blue"> </span> размер также можно увеличить. вот напишите stackoverflow.com/a/24960243/6188148
Monojit Sarkar

28

Font Awesome: - Еще более 150 значков - Пиксель идеален при шрифте начальной загрузки по умолчанию (14 пикселей) - Значки не имеют одинакового размера и требуют настраиваемого CSS для каждого выравнивания - Имеет маркированный список, вращение (можно добавить с помощью css3), сложенные значки , и анимация счетчика (можно добавить вручную). Глификоны: - Меньше иконок - Pixel Perfect с большим размером шрифта (16 пикселей) - Иконки того же размера

см .: http://tagliala.github.io/vectoriconsroundup/

Параллельное сравнение популярных шрифтов для иконок, созданных для Bootstrap.


12

Font awesome - это набор векторных иконок, которые получены с использованием определенного шрифта и некоторого CSS для создания «магии». Glyphicons использует технику sprite-css.
Вы можете использовать их оба, просто добавьте файл css после файла Bootstrap.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

Если вам не нужны глификоны, а нужен только отличный шрифт, вам следует перейти сюда и настроить загрузку Bootstrap, чтобы получить его без глификонов.


13
Глификоны, которые поставляются с начальной загрузкой, теперь также используют метод шрифта! getbootstrap.com/components/#glyphicons
Neo

Как ? Предоставляет ли ваша ссылка информацию для использования глификонов в векторе.
trante 08

4
Новые глификоны для Twitter Bootstrap уже представлены в векторном формате.
Tommaso Capelli
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.