2013-06-26 3 views
69

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

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

ответ

12

Шрифт awesome представляет собой набор векторных иконок, которые получены с использованием определенного шрифта и некоторых css для создания «магии», Glyphicons использует технику спрайта-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"/> 

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

+13

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

+0

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

+4

Новые глификоны для Twitter Bootstrap уже в векторном формате. –

60

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

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

Мое предложение - вы используете бутстрап с шрифтом-awesome. Сначала включите bootstrap css, а затем Font-awesome css, так что Glyphyicons будут переопределены шрифтом - удивительным.

UPDATE

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

+17

+1, но интеграция с Font Awesome не была реализована в Bootstrap 3. FA официально не связан с twitter, кроме поддержки Bootstrap 2 из коробки. Вот [сравнение различных пакетов значков шрифтов] (http://tagliala.github.io/vectoriconsroundup/), которые поддерживают загрузку. – jrhorn424

+1

@ jrhorn424, это потрясающая сравнительная таблица! Благодаря! – KyleMit

+0

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

25

Шрифт Высокий: - Более 150 иконы - Pixel идеально подходит при начальной загрузки шрифта по умолчанию (14px) - иконки не имеют одинаковый размер и требуют специального CSS для каждого выравнивать - Имеет маркированный список, вращение (может быть добавлен с помощью CSS3), сложенные иконок, и кок анимации (может быть добавлен вручную ) Glyphyicons: - Меньше иконки - Pixel Совершенного на большем размере шрифта (16px) - одинаковых иконки размера

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

A side-by-side comparison between popular icon fonts made for Bootstrap.

5

Просто обновите этот вопрос, чтобы в дальнейшем помочь.

В настоящее время в 2016 году тренд google material fonts. ИМХО, они лучше, чем глификоны и шрифт удивительные, выглядят льстными, и для использования более 350 значков.Бесплатный дистрибутив здесь: https://design.google.com/icons/

Я могу перечислить несколько преимуществ использования плоских иконок и дизайна материалов, а также Material Design предоставляет потрясающие преимущества для вашего Android-приложения. Material Design - это визуальный дизайн, разработанный компанией Google в ОС Android L (Android 5.0). Рамка материального дизайна работает со всеми платформами Android и известна для плоского графического интерфейса. Новая система визуального дизайна Google является плоской, элегантной и яркой, создавая единый Android-интерфейс.

Брендинг Материал конструкции использует плоские и светлые предметы. Для маркировки всего APP требуется всего два-три цвета. материальный дизайн легко маркировать APP, которые вы разрабатываете.

Взаимодействие с пользователем В эпоху Интернета очень важно привлекать пользователей. Вы должны постоянно общаться с пользователями через ваш APP. Участие пользователя является одним из ключевых факторов успеха. 35% Smart-Phone APPS используются только один раз в срок жизни пользователя, который установил APP. Конструкция материала обеспечивает визуальный язык между пользователем и вами.

BETTER UI/UX UI/Ux является средством связи между вами и пользователем. Плохой пользовательский интерфейс заставит пользователя удалить ваш APP.

Material Design заботится о пользователях. Он глубоко взаимодействует с пользователем. Конструкция материала имеет отзывчивое отношение &. Вы можете порадовать пользователя, интегрируя дизайн материалов в свое приложение.

+1

Маркетинговый рекламный блок – Savage

+0

Он также намного дороже в памяти – JustinJmnz