Czcionki ikon służą do umieszczania pewnych standardowych ikon w treści witryny. ten Czcionka „Niesamowite” to dobry przykład, który oferuje wiele zalet w porównaniu z innymi czcionkami ikon. Sugerujemy również użycie Czcionki ikon z Freepik jako dobra alternatywa.
Font Awesome został pierwotnie zaprojektowany przez Dave'a Gandy'ego Do użytku z Bootstrap na Twitterze. Font Awesome może być używany z WordPress za pomocą Wtyczka Font Awesome Icons zaprojektowany przez Rachel Baker.
Oto krótkie wprowadzenie do takich czcionek i gdzie czcionka Awesome pasuje do stylu, który może być jeszcze w powijakach.
Dlaczego warto używać czcionek ikon
Podczas projektowania strony internetowej obrazy zajmują dużo miejsca w sieci ze względu na ich rozmiary. Muszą być również wywoływane na Twoich stronach internetowych za pomocą znaczników HTML. Nie tylko to, ale ich skalowanie jest często problemem, tracąc definicję, gdy powiększają się. Zwykły obraz rozwiązuje się zgodnie z przeznaczeniem tylko wtedy, gdy jest używany w pierwotnie zaprojektowanych wymiarach.
Gdy szukasz standardowych obrazów ikon, takich jak pojazdy, określone znaki interpunkcyjne lub ikony wykresów graficznych, czcionki ikon mogą oferować skalowalne obrazy, które wyglądają tak samo niezależnie od rozmiaru czcionki. To tak samo, jak litery i cyfry wyglądają tak samo, niezależnie od tego, czy używasz rozmiaru czcionki 2, 5, czy 10 lub 24 punktów.
W wielu przypadkach ludzie po prostu nie używają obrazów z powodu tego problemu, a ich artykuł lub raport online cierpi z powodu szczegółów lub jasności. Korzystając z Font Awesome, mogą dodawać podstawowe ikony do swoich witryn i skalować je do wymaganego rozmiaru, ograniczonego jedynie wymiarami dokumentów — i mogą to robić bez utraty ostrości. Możesz patrzeć na skalowalne ikony w taki sam sposób, jak na skalowalne znaki czcionek.
Oto wybór dostępnych ikon odtwarzacza wideo i społecznościowych:
A także nowe ikony w wersji 3.0:
Każdy z nich można powiększyć bez utraty rozdzielczości. Możesz zmienić ich kolor i łatwo dodać cienie oraz zmienić ich przezroczystość. W rzeczywistości można z nimi zrobić wszystko, co można z obrazami, a nawet bez wad związanych z rozmiarem pliku.
To jest w zasadzie to, co mogą zrobić czcionki ikon, a w szczególności czcionka Awesome. Oto kilka informacji, jak z nich korzystać i jak najlepiej je wykorzystać, a także jedna lub dwie wady związane z frontami ikon:
Korzystanie z czcionek Awesome
Z normalnym Bootstrapem CSS:
Font Awesome może być używany z domyślnym Bootstrap CSS przez skopiowanie katalogu czcionek Awesome do projektu, a następnie skopiowanie font-awesome.min.css do projektu. Następnie musisz otworzyć font-awesome.min.css i edytować ścieżki czcionek, aby upewnić się, że wskazują na lokalizację Awesome.
W sekcji Head Twojego kodu HTML lokalizacja font-awesome.min.css powinna być odwoływana w następujący sposób:
Ścieżka czcionki jest względna względem katalogu CSS.
Z Bootstrapem mniej:
Jeśli używasz Twitter Bootstrap z LESS CSS, najpierw skopiuj katalog czcionek Font Awesome do swojego projektu i font-awesome-less do katalogu Bootstrap Less. Następnie:
- a) Otwórz bootstrap.less i zastąp @import „sprites.less”; z @import „font-awesome.less”;
- b) Otwórz plik font-awesome.less projektu i edytuj zmienną @FontAwesomePath, aby wskazywała katalog czcionek.
@FontAwesomePath: "../czcionka";
Ścieżka czcionki jest względna względem skompilowanego katalogu CSS.
Wszystko gotowe – chociaż jeśli używasz statycznego kompilatora, powinieneś przekompilować MNIEJ.
Nieużywanie Bootstrapa:
Jeśli nie używasz Bootstrap, to po skopiowaniu pliku czcionki do katalogu projektu możesz skopiować jeden z dwóch plików z czcionkami do swojego projektu, otwórz go na końcu, a następnie edytuj lokalizację czcionki, aby wskazywała na katalog czcionek.
Jeśli używasz Internet Explorera 7, użyj font-awesome-ie7.min.css
Jak korzystać z Font Awesome w WordPressie
Istnieją dwa proste sposoby korzystania z czcionek ikon w WordPressie, w którym przesłałeś wtyczkę*. Możesz je osadzić za pomocą HTML lub użyć shortcode. Oto przykłady każdego z nich:
Używając HTML: Tam, gdzie chcesz, aby pojawiła się czcionka, po prostu dodaj nazwę elementu do nazwy klasy w następujący sposób: [html] [/html]
doda czarne kółko.
Możesz zmienić rozmiar koła w ten sposób:
Prawdopodobnie łatwiej będzie dodać rozmiar czcionki do arkusza stylów CSS, jeśli zamierzasz często używać tego samego rozmiaru ikony, a powyższego formatu dla wyjątków.
Korzystanie z kodu skróconego: Shortcode jest łatwiejszy, ale generalnie będzie działał tylko dla treści postów i stron na ekranie edytora postów. Format to [icon name=icon-circle] w miejscu, w którym chcesz umieścić okrąg.
Wadą czcionek ikon
Czcionki ikon wydają się świetne w użyciu, gdy musisz dodać konkretną ikonę do swojego bloga lub witryny i można je połączyć, aby wykonać określone funkcje. Jednak nie wszystko jest idealne, a czcionki ikonowe mają też wady. Oto typowe problemy zgłaszane przez użytkowników czcionek ikon, które nie mają zastosowania do Font Awesome — dlatego jest tak „Awesome!”
- Jednym z nich jest potencjalny problem z czytnikami ekranu, które mogą czytać na głos ikonę jako literę alfabetu. Nie stanowi to problemu z Font Awesome ze względu na sposób pobierania znaków czcionki.
- Mogą być prezentowane tylko w jednym kolorze – lub w gradiencie kolorów przy użyciu gradientów CSS3. Czy to prawdziwy problem z czcionkami ikon?
- Utworzenie niestandardowej czcionki odpowiadającej Twoim potrzebom może zająć trochę czasu. Jednak istnieje już duży wybór niesamowitych czcionek oferowanych przez Font Awesome, a lista jest stale poszerzana. Chociaż jest to bezpłatna czcionka o zamkniętym kodzie źródłowym, zatwierdzone czcionki zaprojektowane przez użytkowników są regularnie dodawane.
Podsumowanie generatora czcionek
Generator Font Awesome to jedna z najlepszych obecnie dostępnych darmowych czcionek ikon. Chociaż został zaprojektowany do użytku z Twitter Bootstrap, można go dostosować do użytku na zwykłych stronach internetowych. Dostępna jest również wtyczka WordPress, która oferuje najlepsze z tej ikony. Jeśli używasz czcionek ikon, wypróbuj Font Awesome, ponieważ możesz być mile zaskoczony, gdy go opanujesz.
* Wtyczka Font Awesome Icons WordPress jest dostępna pod adresem https://github.com/rachelbaker/
Vivek Nath R
Na moim blogu używam wtyczki czcionek Wp Exclusive Icon http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Zaletą jest to, że ma więcej opcji dostosowywania, takich jak zmiana koloru, rozmiaru, orientacji itp., A także ma wiele innych ikon. Sprawdź to.
Rajesh Namase
Dziękujemy Vivek za udostępnienie tej wtyczki WordPress naszym czytelnikom.
Jamesa Dreesena
Hej Vivek, dzięki za udostępnienie wtyczki, szukam czegoś takiego. Spróbowałbym również wypróbować Font Awesome Icons, aby zobaczyć, który jest dla mnie. Niezły artykuł Rajesh, proszę tak trzymać! Wszystkiego najlepszego.
Rajesh Namase
Spróbuj też użyć wtyczki Font Awesome WordPress :)
Andy
Cześć, szukałem właśnie czegoś takiego, ponieważ jestem zbyt leniwy, aby tworzyć te wszystkie klasy i dodawać style i obrazy do motywu. Dziękuję Ci!!
Vipin
Dziękuję zarówno Vivekowi, jak i Rajeshowi, obaj dostarczyli informacji, których szukałem.
Rohit Chougale
cześć rajesh
„Powiedz mi, czy możemy odtwarzać wideo w php online, jeśli tak, powiedz mi, jak ...
Rajesh Namase
Możesz spróbować użyć tagów wideo HTML 5 :) I łatwo jest używać HTML 5 z PHP :)
Vaibhav
Zdecydowanie dodaję tę wtyczkę do mojego wordpressa wg..
dzięki administratorowi ..!
Ananda Hittinali
cóż, nie jestem człowiekiem wielu słów, więc ta wtyczka jest dla mnie bardzo pomocna. dzięki za udostępnienie tej wtyczki.
Lilia
Czy jest wtyczka do tego typu rzeczy? Wow, niesamowite, kiedy pierwszy raz to usłyszałem. Dziękuję za udostępnienie tego.
Mohsin ali
Bardzo ciekawa wtyczka Rajesh, skąd wziąłeś te unikalne pomysły.
Davida Crofta
Cześć,
dzięki za tego miłego bloga, ponieważ ten temat „Icon Fonts” jest dla mnie bardzo nowy, więc mogę poznać wiele nowych rzeczy i nowych słów na twoim blogu.
Generator czcionek to naprawdę najlepsze darmowe czcionki ikon, które są obecnie dostępne. więc jest to bardzo przydatne.
David Johnson
FYI, użyłeś terminu „Generator Font Awesome”, ale Twój artykuł dotyczy samego Font Awesome, a nie generatora. Słowo „generator” ma szczególne znaczenie w kontekście czcionek ikon. Przykłady generatorów czcionek ikon, które obsługują Font Awesome, obejmują icnfnt i Fontello.
Rajesh Namase
OK, zaktualizowaliśmy tytuł artykułu, dzięki.
Carlton
Pominąłeś jedną istotną wadę czcionek ikon: nie ulegają degradacji z wdziękiem. Wszyscy użytkownicy, którzy mają wyłączone pobieranie czcionek (ponieważ albo są świadomi bezpieczeństwa, kiedyś byli świadomi bezpieczeństwa i zapomnieli, albo zostali skonfigurowani przez kogoś innego, kto dbał o bezpieczeństwo i nie byli świadomi) po prostu widzą brzydkie puste symbole glifów. Aby być odpowiedzialnym użytkownikiem fontów ikonowych, musisz zaakceptować wrzucenie tych użytkowników pod autobus.
Ayush Agrawal
Ten artykuł wydaje się nieco stary, ale chciałbym powiedzieć, że dobrym sposobem na użycie niesamowitej czcionki jest użycie jej cdn: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Pomaga blogerom, którzy chcą skrócić czas ładowania.
vikas
Fajny post, Font Awesome to jedno z najlepszych osiągnięć w świecie projektowania.
Mark Fox
Dzięki za udostępnienie. Teraz jestem bardziej skłonny go użyć.
Gaurava Dutta
Człowiek! 2013, jak mogłem tego wcześniej nie widzieć, ale nadal działał dla mnie bezbłędnie. Dzięki za to.