Jak korzystać z Font Awesome w witrynie WordPress?

Mając do wyboru użycie ikony wektorowej lub statycznego obrazu, dobrym pomysłem jest skorzystanie z wektora. Są małe, szybko się ładują i można je skalować do dowolnego rozmiaru bez utraty rozdzielczości. Font Awesome to znakomita biblioteka ikon wektorowych, których możesz używać w swoich witrynach internetowych i które prawdopodobnie mają prawie każdy kształt lub markę, których potrzebujesz. A co najlepsze? Jest wolne. Po drugie, to łatwe.

Subskrybuj nasz kanał YouTube

Czcionka Niesamowite ikony WordPress

Korzystanie z biblioteki Font Awesome w witrynie WordPress jest stosunkowo bezbolesne. Po wykonaniu tych prostych kroków będziesz mógł skrócić czas ładowania strony i stworzyć naprawdę przejrzyste, wyraźne projekty, używając tych ikon w ramach swojej pracy.

Należy pamiętać, że (w większości przypadków) ikony Font Awesome będą dostarczane do Twojej witryny jako rzeczywiste czcionki. Stąd nazwa Font Awesome. Będziesz mógł stylizować i manipulować nimi w każdy sposób, w jaki normalnie można by było czcionką, używając CSS poprzez @font-face i Font Awesome font-family .

Dzięki temu nie musisz się martwić o rozmiar lub odstępy dla każdej przeglądarki lub okna roboczego. Jeśli brzmi świetnie, to dlatego, że tak jest. A oto jak to robisz:

Instalowanie niesamowitej czcionki

Chociaż istnieje ręczny sposób na instalowanie i używanie Font Awesome, istnieje lepszy sposób dla użytkowników WordPress. Wspaniali ludzie z FA wydali oficjalną wtyczkę Font Awesome WordPress, która działa pięknie.

Po zainstalowaniu i aktywacji wtyczki masz teraz dostęp do skrótu [[nazwa ikony]] oraz do fragmentów kodu HTML. Tak długo, jak trzymasz pod ręką listę ikon FA, dzięki czemu wiesz dokładnie, jakiej ikony potrzebujesz. Zobaczysz na stronie ustawień wtyczki (znajdującej się w Ustawieniach — Czcionka Awesome ), jak wszystko jest domyślnie skonfigurowane. Ogólnie rzecz biorąc, można je przechowywać i używać. Większość ludzi nie potrzebuje niczego więcej.

Opcja Metoda jest prawdopodobnie najważniejsza dla większości ludzi. Możesz przełączać się między czcionką internetową a SVG . Chociaż SVG daje więcej możliwości i funkcji (takich jak transformacje mocy i maskowanie), CDN Font Awesome dostarcza ikony jako pliki SVG, a nie jako czcionkę. Chociaż pod pewnymi względami jest to lepsze, SVG nie jest rozpoznawany przez wiele przeglądarek, a WordPress nie zawsze dobrze współpracuje z obrazami SVG. Sugerujemy więc bezpieczne korzystanie z wersji z czcionkami internetowymi.

Podobnie Font Awesome, jeśli o to chodzi: jeśli nie jesteś pewien różnicy lub nie wiesz, dlaczego musisz używać SVG, prawdopodobnie najłatwiejsze jest pozostanie przy domyślnej metodzie czcionek internetowych.

Korzystanie z ikon Font Awesome w witrynie WordPress jest proste. Po prostu dodaj <i class=”fab fa-wordpress”></i> w dowolnym miejscu, w którym chcesz wyświetlić ikonę. Sprawdź bibliotekę ikon, aby wiedzieć, jaką nazwę wpisać.

Uwaga: skróty we wtyczce są trafione i chybione. Niektóre ikony renderują się doskonale, podczas gdy inne są puste. Zalecamy trzymać się wstawiania HTML, chyba że widzisz, że krótki kod działa dla Ciebie. Zobacz poniżej przykład powyższego WordPressa, który nie renderuje, podczas gdy ikona aparatu tak.

I jesteś skończony. Wtyczka Font Awesome WordPress jest świetna dla osób, które nie czują się komfortowo wchodząc do swojego motywu lub plików, aby wstawić wymagany w inny sposób kod. Jeśli jednak czujesz się komfortowo, możesz postępować zgodnie z tymi instrukcjami, aby uzyskać ikony Font Awesome w swojej witrynie.

Ręczne instalowanie ikon Font Awesome

Pierwszą rzeczą, którą musisz zrobić, to wejść na stronę Font Awesome. Stamtąd kliknij przycisk Rozpocznij korzystanie z bezpłatnego . Oferują płatne plany dla osób, które mają witryny o dużym natężeniu ruchu i potrzebują rozwiązania dla przedsiębiorstw, ale ogółowi publiczność może ujść na sucho dzięki bezpłatnej wersji. Otrzymasz 1500 ikon za darmo i ponad 5000 wariantów w abonamencie Pro.

Następnym krokiem jest po prostu kopiowanie/wklejanie. Ale będziesz chciał się upewnić, że podświetliłeś opcję czcionki internetowej, tak jak omówiliśmy wcześniej.

Większość motywów ma miejsce, w którym możesz automatycznie wstawić kod do <head> witryny. W przypadku Divi, na przykład, możesz przejść do opcji motywu – integracje i wkleić ten kod w polu oznaczonym Dodaj kod do nagłówka swojego bloga .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Kiedy klikniesz Zapisz, możesz zacząć włączać dowolne ikony, tak jak zrobiliśmy powyżej. Tylko, że nie masz dostępu do krótkiego kodu , robiąc to.

Jeśli Twój motyw nie obsługuje integracji kodu

Jeśli nie możesz znaleźć takiego miejsca w swoim motywie, równie łatwo jest to zrobić ręcznie. Aby to zrobić, będziesz musiał jednak zagłębić się w pliki rdzenia swojego motywu, ale jest to bardzo szybkie kopiowanie/wklejanie i jest (ogólnie) całkiem bezpieczne. Przejdź do Wygląd - Edytor na pulpicie nawigacyjnym WP i znajdź plik header.php .

Znajdź wiersz, w którym jest napisane </head> , a przed nim musisz wkleić ten sam kod z Font Awesome. Naciśnij Aktualizuj plik , a będziesz mógł od razu zacząć używać ikon FA. Ponownie, nie dostaniesz krótkiego kodu, instalując Font Awesome w ten sposób.

Pamiętaj też, że za każdym razem, gdy edytujesz plik motywu, chcesz użyć motywu podrzędnego. W ten sposób zapobiegasz zastąpieniu wprowadzonych zmian podczas aktualizacji motywu.

Więcej opcji instalacji

A jeśli masz inne, bardziej specyficzne potrzeby związane z Font Awesome, oferują one wiele sposobów uzyskania dostępu do biblioteki. Od instalacji NPM i Yarn po integrację Sketch i React, mają mnóstwo opcji, jeśli potrzebujesz ich więcej niż WordPress.

Stylizacja czcionek Niesamowite ikony

Teraz, gdy masz je zainstalowane, nadszedł czas, aby ikony wyskoczyły. Możesz to zrobić za pomocą CSS, ponieważ każda z ikon jest zarządzana przez klasę CSS. Dwa najczęściej używane style to kolor i rozmiar. Możesz umieścić styl CSS w swoich arkuszach stylów lub możesz to zrobić wewnętrznie. Ogólnie rzecz biorąc, możesz chcieć użyć stylu wbudowanego, ponieważ takie ikony nie są zwykle uniwersalne w całej witrynie.

Witryna Font Awesome zawiera przykłady, jak to zrobić. Pokazują rozmiar za pomocą ikony igloo i dodatkowej klasy, takiej jak fa-xs lub fa-xl lub fa-2x dla określonego rozmiaru.

Dodatkowo, jeśli potrzebujesz, aby ikona była związana z określonym rozmiarem, a wartości bezwzględne nie będą działać, możesz umieścić ją w osobnym <div>, aby działała w ramach twoich ograniczeń.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Zawijanie

I to wszystko! Niesamowite, prawda? Niezależnie od tego, czy korzystasz z wtyczki Font Awesome WordPress, czy wstawiasz kod ręcznie, uruchomienie witryny nie wymaga więcej niż kilku kroków. Font Awesome jest popularny z jakiegoś powodu, a część z nich wynika z łatwości użytkowania. Więc idź tam i bądź niesamowity!

Jaki jest twój ulubiony sposób używania ikon Font Awesome?

Artykuł zawierał zdjęcie dzięki uprzejmości Font Awesome