Font Awesome vs Glyphicons na Twitterze Bootstrap

Question

Jestem początkującym programistą w zakresie tworzenia stron internetowych i ostatnio zacząłem pracować z Twitter Bootstrap, wiem, że używa on Glyphicons, którego już znam. Ale natknąłem się także na Font Awesome, która mówi, że jest zbudowany na Bootstrap.

Jakie są różnice między tymi dwoma? Chodzi mi o to, że jest alternatywą dla innych? A może używałbyś ich w różnych miejscach?

Answer 1

Font awesome to zbiór ikon wektorowych, które są uzyskiwane przy użyciu określonej czcionki, a niektóre css do "magii", Glyphicons używa techniki sprite-css.
Możesz użyć ich obu, po prostu dodaj plik css po pliku Bootstrap.

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

Jeśli nie chcesz mieć glyphicons ale tylko jeden font-niesamowite należy udać here i dostosować Bootstrap pobrania je zdobyć bez glyphicons.

Answer 2

W Bootstrap 2.x.x Glyphyicons były w formacie obrazu, a więc nie można zwiększyć rozmiar, zmienić kolor, background-color, etc łatwo. Jednak font-awesome zapewnia skalowalne ikony wektorowe, które można natychmiast dostosować - rozmiar, kolor, cień i wszystko, co można zrobić dzięki sile CSS.

Font-awesome jest naprawdę alternatywą dla Glyphyicons, która jest aktualizowana od czasu do czasu za pomocą nowych ikon. Fat i Mdo planują zintegrować Font-awesome w bootstrap wersji 3 jako zamiennik dla Glyphyicons.

Moja sugestia to używanie bootstrap z font-awesome. Najpierw włącz bootstrap css, a następnie Font-awesome css, aby Glyphyicons zostały zastąpione przez niesamowite czcionki.

UPDATE

W wersji bootstrap 3.x.x glyphicons stać formatu czcionki, która będzie świadczyć ładnie nawet w 12px font-size. Jeśli używasz najnowszej wersji fontawesome, tj. 4.01, możesz użyć obu glifów z fontawesome.

Answer 3

czcionki Niesamowite: - Ponad 150 więcej ikon - Pixel idealny na czcionki domyślnej bootstrap (14px) - ikony nie mają tę samą wielkość i wymagają niestandardowego CSS dla każdego, aby wyrównać - Czy lista punktowana, obrót (CAN zostać dodany z CSS3), ułożone ikony i animacje spinner (można dodać ręcznie ) Glyphyicons: - Less Ikony - Pixel Idealne na większy rozmiar czcionki (16px) - Ikony sam rozmiar

patrz: http://tagliala.github.io/vectoriconsroundup/

Answer 4

Właśnie aktualizuję to pytanie, by dalej pomagać.

Teraz w 2016 roku trendem są: czcionki informacyjne Google. IMHO są milsze od glifów i czcionek niesamowitych, wyglądają bardziej płasko, a do użycia jest ponad 350 ikon.Darmowa dystrybucja tutaj: https://design.google.com/icons/

Mogę wymienić kilka zalet korzystania z płaskich ikon i projektowania materiałów również, Material Design zapewnia niesamowite korzyści dla aplikacji Android. Material Design to wizualne ramy projektowe opracowane przez Google w systemie Android L OS (Android 5.0). Material design framework działa ze wszystkimi platformami Android i jest znany z płaskiego interfejsu graficznego. Nowa struktura wizualna Google jest płaska, elegancka i żywa, tworząc zunifikowany interfejs Androida.

Branding W projekcie materiałów używa się obiektów płaskich i lekkich. Wymaga tylko dwóch do trzech kolorów do oznakowania całej aplikacji. projektowanie materiałów jest łatwe do oznaczenia tworzonych aplikacji.

Zaangażowanie użytkownika W erze Internetu bardzo ważne jest zaangażowanie użytkowników. Musisz stale komunikować się z użytkownikami za pośrednictwem aplikacji. Zaangażowanie użytkowników jest jednym z kluczowych czynników sukcesu. 35% aplikacji Smart-Phone APPS jest używanych tylko raz w życiu użytkownika, który zainstalował aplikację. Material design zapewnia wizualny język między użytkownikiem a użytkownikiem.

LEPSZE UI/UX UI/Ux to środek komunikacji między Tobą a Użytkownikiem. Zły interfejs użytkownika spowoduje odinstalowanie aplikacji.

Material Design dba o wygodę użytkownika. Głęboko wchodzi w interakcję z użytkownikiem. Material Design reaguje na znaczące interakcje. Możesz cieszyć się użytkownikiem, integrując materiałowy projekt w swojej aplikacji.