Font Awesome – co to jest i jak używać w WordPressie

Font Awesome WordPress

Font Awesome – to jedna z najpopularniejszych bibliotek icon fonts, czyli szczególnego rodzaju fontów, które zamiast tradycyjnych liter zawierają symbole. Ot choćby ołówka lub aparatu fotograficznego.

– Cześć, wyglądam jak ołówek, ale jestem fontem. It to nie byle jakim, bo icon fontem! Pochodzę z Font Awesome.
– Hej, ja to dopiero jestem aparat! Też z Font Awesome!

Mimo że icon fonts wyglądają jak ikonki, wciąż pozostają fontami. Oznacza to, że można je powiększać, zmieniać kolory, dodawać cienie za pomocą CSS-a:

– Wow! Powiększyłem się!
– OMG! Że też zawsze muszę za Ciebie wstydzić (tak bardzo, że aż robię się czerwony)
– Zrobiło się tu gorąco, może odrobina cienia?

Jak to działa?

Jak to się stało, że ołówek z przykładu nagle się powiększył, a aparat zaczerwienił? No i w ogóle skąd ci goście się tu wzięli?

Sprawa jest prostsza niż mogłoby się wydawać. Wystarczy skorzystać z kilku gotowych class CSS:

Korzystanie z Font Awesome we wpisie w WordPressie
Korzystanie z Font Awesome we wpisie w WordPressie

A skoro to są fonty, to powiększanie tym razem na pewno zadziała. Co więcej, zabieg ten jest darmowy i sprowadza się do dodania prostego CSS-a:

Powiększanie Font Awesome za pomocą CSS
Powiększanie Font Awesome za pomocą CSS

Ale skąd wziąć te klasy?

Te magiczne klasy wyszukujemy na stronie fortawesome.github.io/Font-Awesome/icons/

Jak wyszukać odpowiednią ikonkę na stronie fortawesome.github.io/Font-Awesome
Jak wyszukać odpowiednią ikonkę na stronie fortawesome.github.io/Font-Awesome

Gdy klikniesz w ikonkę pencil pokaże ci się duuuuży ołówek, a właściwie to w kilku rozmiarach. Ale to na czym musisz się skupić, to kod HTML na dole strony:

Przykład pobierania kodu z Font Awesome
Przykład pobierania kodu z Font Awesome

Byłem, zobaczyłem, wstawiłem. No i d… blada, nie działa!

Przekopiowanie samego kodu nie wystarczy. Bo niby skąd twój WordPress ma wiedzieć, że klasa fa-pencil ma renderować magiczny ołówek?

Każda klasa CSS, żeby zadziałać, musi być gdzieś zdefiniowana. Nie żebyś od razu to ty musiał odwalać czarną robotę. Dobrzy ludzie upraszają świat dla Ciebie. I to za darmo.

Gdzie znajdziesz plik Font Awesome do pobrania
Gdzie znajdziesz plik Font Awesome do pobrania

Definicje tych klas znajdziesz w paczce zip na stronie głównej Font Awesome.

Uwaga, nie musisz downloadować tego pliku, żeby zmusić Twojego WordPressa do obsługi Font Awesome.

Istnieje wygodniejszy sposób.

Jak dodać CSS z Font Awesome do strony w WordPressie?

  1. Wejdź na fortawesome.github.io/Font-Awesome/get-started
  2. W sekcji zatytułowanej „EASIEST: BootstrapCDN by MaxCDN” znajdziesz kod HTML do wklejenia na stronę. Ale uwaga! Zewnętrzne pliki CSS-owe wstawia się do WordPressa nieco inaczej, dlatego my skorzystamy tylko z samego adresu pliku CSS. Skopiuj go do schowka.

    Jak pobrać link do pliku CSS z Font Awesome
    Jak pobrać link do pliku CSS z Font Awesome
  3. Teraz wystarczy użyć podany adres jako argument funkcji wp_enqueue_style, za pomocą której dołączamy zewnętrzne pliki CSS do WordPressa. Do pliku functions.php twojego motywu dodaj:
    function additional_css_scripts() {
    	
    	//Load Font Awesome
    	wp_enqueue_style( 'fontawesome','https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
    }
    add_action( 'wp_enqueue_scripts', 'additional_css_scripts' );
    
    
    

Jak sprawdzić czy plik CSS został poprawnie dodany do Twojej strony

W przeglądarce Chrome, sprawdzenie czy plik CSS dla Font Awesome dołączył się jak należy, zajmie dosłownie chwilkę. Służy do tego zakładka Resources:

Jak sprawdzić czy plik CSS dla Font Awesome dołączył się prawidłowo
Jak sprawdzić czy plik CSS dla Font Awesome dołączył się prawidłowo

Plik font-awesome.min.css obecny, więc wszystko gra. No to teraz możesz się bawić do woli.

A może wolisz zabawę z Font Awesome na sucho?

Jeśli przeraża Cię cała ta procedura z dodawaniem pliku CSS do functions.php, a mimo wszystko fonty z Font Awesome cię zaintrygowały, mam i coś dla Ciebie.

Na stronie www.w3schools.com możesz testować icon fonts z Font Awesome.

  1. Kliknij w ten link www.w3schools.com/icons/tryit.asp?filename=tryicons_awesome_intro_basic
  2. HTML w części body zamineń na poniższy:
    
    
    <h1>Przyjdź na WordUp'a we Wrocławiu</h1>
    
    <ul style="font-size:32px; list-style-type: none">
     
    <li><i class="fa fa-calendar-check-o"></i> 27 listopada 2015 </li>
    <li><i class="fa fa-map-signs"></i> we Wrocławiu, w klubie Winners Pub</li>
    <li><i class="fa fa-wordpress"></i> odpowiadamy o WordPressie </li>
    <li><i class="fa fa-desktop"></i> będą 3 prezentacje </li>
    <li><i class="fa fa-users"></i> ponad 40 uczestników</li>
    <li><i class="fa fa fa-beer"></i> piwo gratis</li>
    <li style="color:red;"><i class="fa fa fa-comments-o"></i> emocjonujące dyskusje</li>
    <li><i class="fa fa-camera"></i> profesjonalna oprawa foto</li>
    <li><i class="fa fa-bed"></i> przyjazny hostel dla zamiastowych</li>
    <li><i class="fa fa-external-link "></i> więcej na <a href="http://wordup.wroclaw.pl/">wordup.wroclaw.pl</a></li>
     
    </ul>
    
    
  3. Kliknij w przycisk See Result

Oto graficzne podsumowanie powyższych kroków:

Testowanie Font Awesome z w3schools.com
Testowanie Font Awesome z w3schools.com

Zastosowania

Myślę, że kreatywnym webmasterom nie zabraknie pomysłów na ciekawe wykorzystanie Font Awesome.

Kilka przykładów:

Wykorzystanie Font Awesome w widgecie

Wykorzystanie Font Awesome w WordPressowym widgetcie
Wykorzystanie Font Awesome w WordPressowym widgetcie

Wykorzystanie Font Awesome dla stronki oferującej wynajem domków

Praktyczne wykorzystanie Font Awesome
Praktyczne wykorzystanie Font Awesome

Ciekawostka. Icon Fonts w WordPressie

Sam WordPress również korzysta z Icon Fonts, ale innych niż Font Awesome:

    • w panelu admina zobacz fonty z Dashicons
    • jeśli używasz motywu Twenty Fifteen znajdziesz tam Genericicons – fonty stworzone przez Automattic
Różnego rodzaju Icon Fonts w WordPressie
Różnego rodzaju Icon Fonts w WordPressie

Twoje doświadczenie z Font Awesome

A czy Ty korzystałeś kiedyś z Font Awesome? Jeśli tak, to zdradzisz konkretnie do czego?

40 komentarzy do “Font Awesome – co to jest i jak używać w WordPressie”

  1. Ja z tym WordUpem nie żartowałam. Przypominam się ponownie, przy okazji sprawdzę czy Font Awesome działają też w komenatrzach. Biorę kod z wpisu i wklejam ponownie:

    Przyjdź na WordUp’a we Wrocławiu

    • 27 listopada 2015
    • we Wrocławiu, w klubie Winners Pub
    • odpowiadamy o WordPressie
    • będą 3 prezentacje
    • ponad 40 uczestników
    • piwo gratis
    • emocjonujące dyskusje
    • profesjonalna oprawa foto
    • przyjazny hostel dla zamiastowych
    • więcej na wordup.wroclaw.pl
  2. Szczerze, dla nie html-owców oraz osób, które nie chcą korzystać z zewnętrznych generatorów kodu, to przydała by się do tego jakaś wtyczka – dodająca odpowiedni przycisk w edytorze. Gdzie oprócz wyboru odpowiedniej ikony, będzie można ją łatwo ostylować.

    1. Wiesz, też tak pomyślałam, jak pisałam ten artykuł i nawet zaczęłam sprawdzać wtyczki w tym temacie, ale ostatecznie nie zdecydowałam się na zarekomendowanie żadnej z nich bo one miały zawsze coś ponad i zaciemniały istotę Font Awesome: że to jest tak proste.

      W zasadzie najtrudniejszym elementem w ręcznym oragnięciu Font Awesome w WP jest dołączenie tego pliku CSS, bo reszta się sprowadza do prostych styli CSS i wkopiowaniu gotowego HTML-a.

    2. Owszem, jednak pojawia się drobny problem – osoby, które wszystko robią wtyczkami mają potem problemy z obsługą i rozwiązywaniem problemów. Ja od własnego bloga stałem się WP-DEV’em i to tylko dlatego, że uparcie dążyłem do celu „jak to działa” i „dlaczego to nie działa”. Z jednej strony fajnie bo mam takich klientów dość sporo, ale naprawdę kiedy wchodzę na WordPressa czasami i widzę, że proste rzeczy, które można załatwić 5-10 linijkami kodu (dostępnego w necie) zastępuje się wielkimi kombajnami i takich kombajnów jest 20-30 na jednej stronie to trochę smutek i dziw, że strona dobrze chodzi.

      1. Tak, też uważam, że jak się zdąży temat samemu, to się zawsze rozwija, nawet jeśli nie uda nam się znaleźć zadowalającego rozwiązania. Odnośnie prolemów, która da się rozwiązać za pomoca tych kilku linijek kodu, fajna by była taka stronka które by pokazywała takie zestawienie jak rozwiązać coś za pomocą wtyczki i obok alternatywę w postaci kodu.

    1. Hej Piotr, masz rację. Dlatego w części z zastosowaniami (przykład z widgetem) CSS inline już nie zobaczysz. W pozostałych przypadkach zdecydowałam się na CSS inline, żeby nie komplikować zbytnio tekstu i skupić się na sednie tematu. Myślę, że jak ktoś potrafi dodać zewnętrzy plik CSS za pomocą funkcji wp_enqueue_style to doskonale czuje dobra praktyki stosowania CSSa.

  3. Bardzo ciekawy pomysł, podoba mi się. Dużym plusem jest też łopatologiczne wytłumaczenie tematu, nawet ktoś nieobeznany zbytnio z kodem może się pobawić 🙂

  4. Nie słyszałam jeszcze o tym, a wygląda na fajny pomysł. Przy najbliższej okazji na pewno wypróbuje! Co do wtyczki – faktycznie nie wszystkie działają jak trzeba i czasem lepiej niektóre rzeczy zrobić ręcznie, jeden z komentujących wyżej miał rację.

  5. Przyznam, że przez jakiś czas miałem mieszane uczucia, jeśli chodzi o Font Awesome. Ktoś mi powiedział, że niepotrzebnie spowalniają stronę, ale okazało się, że nic takiego nie miało miejsca. Strona, na której testowałem FA działała (na moje oko) nawet nieco lepiej. Osobiście więc, choć nie jestem wielkim specjalistom od projektowania stron, mogę się tylko pozytywnie wypowiadać na temat FA.
    Dzięki za ten artykuł – to podstawy, ale takie wpisy przydają mi się do odświeżania wiadomości i dowiadywania się nowych rzeczy, które wcześniej przegapiłem.

    1. Dzięki za podzielenie się swoim doświadczeniem, no i cieszę się, że wpis przydał się do odświeżenie wiadomości.

  6. Świetny artykuł, można byłoby jeszcze dodać opis dodawania iconek poprzez sam css (before, after itp.), wstawiając je przed dane elementy jak np. link
    a:before {
    font-family: FontAwesome;
    content: „\f095”;
    }

  7. Super, przydatny wpis 😉 prowadze blog na wordpresie i kolekcjonuje takie ciekawostki 😉 podoba mi sie, ze wszystko tak dokladnie tlumaczysz.

  8. Może ktoś podpowie jak zrobić, żeby po wstawieniu:

    a:before {
    font-family: FontAwesome;
    content: „\f08e”;
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    }

    FontAwesome dodawało tylko do linków z artykułu?

  9. Bardzo fajny artykuł, ja wykorzystuje od jakiegoś czasu już Font Awesome na swoich stronach i jestem jak najbardziej zadowolony. FA bardzo łatwo wdrożyć na dowolnej stronie niezależenie od cms-a na jakim została postawiona.

  10. A ja mam pytanie. Jak wstawić ikonki Font Awesome czyli dla przykładu w pliku class-wp-widget-recent-posts.php tak aby po wstawieniu do sidebaru widżetu „Najnowsze wpisy” wraz z tytułami wyświetlane były ikonki?

    1. np.:
      .widget_recent_entries ul li::before {
      display: inline-block;
      font-weight: 900;
      font-family: „Font Awesome 5 Free”; content: „\f2f6”;
      -webkit-font-smoothing: antialiased;
      }

      1. Do pliku class-wp-widget-recent-posts.php ten kod się nie nadaje a w stylu CSS dla motywu CoverNews nie działa.

        1. 1. nigdy nie grzeb w plikach WP, od tego masz motyw lub wtyczki
          2. to wrzucasz w style css, nie w pliki php – czyli np. w Personalizacja >> Dodatkowy CSS, albo w pliku style.css motywu potomnego
          3. w powyższym kodzie musisz sobie zmienić ten fikuśny cudzysłów drukarski na zwykły. Te drukarskie ładnie wyglądają ale w kodzie nie działają
          4. CoverNews ma nieco inne formatowanie i sie trochę sypie, lepiej zmienić mu na: .widget_recent_entries ul>li a::before {
          i dorzuć: margin-right: 5px;

          Jak najbardziej opisany wyżej sposób działa.

          1. Okey. Już dałem radę i kod wygląda tak jakby ktoś potrzebował:
            .widget_recent_comments li a,
            .widget_pages li a,
            .widget_archive li a,
            .widget_meta li a,
            .widget_categories li,
            .widget_nav_menu li a,
            .widget_recent_entries li a::before {
            /*border-bottom: 1px solid #35373c;*/
            padding-bottom: 10px;
            font-size: 17px;
            margin-right: 5px;
            display: inline;
            font-weight: 900;
            font-family: 'Font Awesome 5 Free’; content: '\f2f6′;
            -webkit-font-smoothing: antialiased;
            position: relative;
            width: 100%;
            }

  11. Fajny poradnik, lubię te ikonki. Jednak zabierają trochę punktów w google insights, wiem że dużo osób to olewa, ale ja jestem pedantem jeżeli chodzi o takie szczegóły i wole ich nie używać 😉

Skomentuj Robert Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.