Font Awesome vs Glyphicons w Twitter Bootstrap

81

Jestem początkującym w tworzeniu stron internetowych i niedawno zacząłem pracować z Twitter Bootstrap, wiem, że używa on Glyphiconów, których już umiem używać. Ale natknąłem się również na Font Awesome, który mówi, że jest zbudowany dla Bootstrap.

Jakie są różnice między nimi? Mam na myśli, czy jedno jest alternatywą dla drugiego? A może powinieneś ich używać w różnych miejscach?

twitter-bootstrap font-awesome glyphicons user2471133
źródło

Odpowiedzi:

66

W Bootstrap 2.xx Glify były w formacie graficznym, dlatego nie można łatwo zwiększyć rozmiaru, zmienić koloru, koloru tła itp. Jednak font-awesome zapewnia skalowalne ikony wektorowe, które można natychmiast dostosować - rozmiar, kolor, cień i wszystko, co można zrobić za pomocą mocy CSS.

Font-awesome to naprawdę alternatywa dla Glyphyicons, która jest aktualizowana od czasu do czasu o nowe ikony. Fat i Mdo planują zintegrować Font-awesome w bootstrap w wersji 3 jako zamiennik dla Glyphyicons.

Moja sugestia jest taka, abyś używał bootstrapu z font-awesome. Najpierw dołącz css bootstrap, a następnie css Font-awesome, aby Glyphyicony zostały zastąpione przez font-awesome.

AKTUALIZACJA

W wersji bootstrap 3.xx glify stają się formatem czcionki, który będzie ładnie renderował się nawet w rozmiarze czcionki 12px. Jeśli używasz najnowszej wersji fontawesome, tj. 4.01, możesz używać obu glifów z fontawesome.

Ravimallya
źródło
19
+1, ale integracja z Font Awesome nie została zaimplementowana w Bootstrap 3. FA nie jest oficjalnie powiązana z twitterem, poza tym, że obsługuje Bootstrap 2 po wyjęciu z pudełka. Oto porównanie różnych pakietów ikon czcionek, które obsługują bootstrap.
jrhorn424
2
Aktualizacja: Bootstrap 4 nie dostarcza już Glifikonów.
MushyPeas
FontAwesome stwierdza, jest w 100% darmowy, nawet do użytku komercyjnego. Glify mają pewne ograniczenia: „Glify Niziołki zwykle nie są dostępne za darmo”. Nie wiem o „czcionkach materiałów google”, ale w przypadku niektórych produktów (moduł js charts) nie można ich samodzielnie hostować, a jedynie linkować z ich CDN.
Andrei
Jaka jest zaleta używania ikon wektorowych, które są dostarczane z czcionką awesome. jaki typ obrazów jest używany w glifach?
Monojit Sarkar,
@Ravimallya Powiedziałeś, że rozmiar i kolor ikony glifu nie mogą być zmienione. nie wiem, w jakim kontekście to powiedziałeś. stwierdziłem, że rozmiar i kolor można zmienić. oto przykład -----> zmiana koloru ikony glifów -> kilka próbek <span class = "glyphicon glyphicon-user" style = "color: blue"> </span> można również zwiększyć rozmiar. tutaj jest napisanie stackoverflow.com/a/24960243/6188148
Monojit Sarkar,
28

Font Awesome: - Ponad 150 dodatkowych ikon - Idealny piksel przy domyślnej czcionce bootstrap (14px) - Ikony nie mają tego samego rozmiaru i wymagają niestandardowego CSS dla każdego wyrównania - Posiada listę punktowaną, obrót (można dodać za pomocą css3), zestaw ikon i animacja przędzarki (można dodać ręcznie) Glify: - Mniej ikon - Idealne piksele przy większym rozmiarze czcionki (16 pikseli) - Ikony tego samego rozmiaru

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

Bezpośrednie porównanie popularnych czcionek ikon stworzonych dla Bootstrap.

Neo
źródło
12

Font awesome to zbiór ikon wektorowych, które są uzyskiwane przy użyciu określonej czcionki i niektórych plików CSS w celu stworzenia „magii”. Glyphicons wykorzystuje technikę sprite-css.
Możesz używać 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ć glifów, ale tylko ten niesamowity font, przejdź tutaj i dostosuj pobieranie Bootstrap, aby uzyskać je bez glifów.

tommaso capelli
źródło
13
Glify, które są dostarczane z bootstrapem, teraz również używają metody font! getbootstrap.com/components/#glyphicons
Neo
W jaki sposób ? Czy Twój link zawiera informacje na temat używania glifów w sposób wektorowy.
trante
4
Nowe glify dla Twitter Bootstrap są już w formacie wektorowym.
tommaso capelli