Pobierz szablon, rozpakuj go i dodaj na swojego bloga.

Font Awesome

Edytuj post
Font Awesome jest rzeczywiście niesamowity, ponieważ pozwala dodać na bloga różne ikonki-obrazki bez użycia photoshopa. Chciałabym wam teraz pokazać, jak w bardzo szybki sposób zainstalować takie ikonki u siebie na blogu.

Dołączenie Font Awesome do bloga

Jest kilka możliwości dodania paczki z ikonkami do bloga, ale najprostszy przypomina dodawanie czcionek z Google Font. Niestety tak jak w przypadku Google Font, blogger nie akceptuje podanego w instrukcji na stronie autora linku. Poprawiony link, który będzie działał w bloggerze wygląda następująco:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link> Wystarczy go skopiować i wkleić w kodzie nad znacznikiem </head>.

Najpopularniejsze ikonki

Teraz zajmijmy się ikonkami. Najczęściej będą nam potrzebne te umieszczone przeze mnie poniżej, ale Font Awesome składa się z o wiele większej ich ilości, wystarczy zajrzeć tutaj.

Ikonka do autora <i class="fa fa-user"></i> Ikonka do daty  <i class="fa fa-calendar"></i> Ikonka do godziny <i class="fa fa-clock-o"></i>  Ikonka do etykiet  <i class="fa fa-tags"></i> Ikonka do komentarzy <i class="fa fa-comments"></i> Ikonka do strona główna <i class="fa fa-home"></i> Ikonka do starsze posty <i class="fa fa-arrow-right"></i> Ikonka do nowsze posty <i class="fa fa-arrow-left"></i>

Znaczniki bloggera

Jednak najtrudniejszym elementem jest znalezienie dla ikonek odpowiedniego miejsca w kodzie. Aby wam to ułatwić wypiszę znaczniki kodu bloggera, za które lub przed którymi należy umieścić kody ikonek. Tylko od was zależy, czy chcecie ikonkę wstawić przed znacznikiem:
Autor: Agata
czy podmienić znacznik
Agata

Znacznik etykiet <data:postLabelsLabel/> Znacznik autora (więcej tutaj<data:top.authorLabel/> Znacznik godziny* (więcej tutaj)<data:top.timestampLabel/> Znacznik daty* <data:post.dateHeader/> Znacznik komentarzy* (więcej tutaj) <data:post.commentLabelFull/> Znacznik strona główna <data:homeMsg/> Znacznik starsze posty <data:olderPageTitle/> Znacznik nowsze posty <data:newerPageTitle/> *W przypadkach oznaczonych gwiazdką ikonki zamieszczamy przed znacznikiem, samych znaczników NIE USUWAMY.

Znacznik godziny

Ten znacznik może wyświetlać zarówno godzinę jak i datę. Zależy od ustawień poczynionych w Układ / Posty w blogu Edytuj w trzecim wierszu. Dlatego zależnie od ustawień pasuje do niego zarówno ikonka godziny jak i daty.

Rozmiar ikonek

Ikonki można powiększyć przez dodanie do ich kodu krótkiego fragmentu. Niestety nie możemy sobie sprecyzować dokładnie wielkości ikonki, a jedynie powiększyć jej rozmiary o krotności. Powiększenie dwukrotne <i class="fa fa-home fa-2x"></i> Powiększenie trzykrotne <i class="fa fa-home fa-3x"></i> Powiększenie czterokrotne <i class="fa fa-home fa-4x"></i> Powiększenie pięciokrotne <i class="fa fa-home fa-5x"></i>

Łączenie ikonek w jedną - zaawansowane

Takiego domku w kwadraciku zestaw Fonte Awesome nie posiada, jednak można go stworzyć przy pomocy dwóch dostępnych kształtów. Wcześniej już opisywanego domku oraz obrysu kwadratu o następującym kodzie:
<i class="fa fa-square-o"></i> Aby połączyć dwie ikonki w jedną należy je zawrzeć w wspólnym spanie o klasie fa-stack fa-lg. Natomiast do kolejnych ikonek dodać odpowiednie oznaczenia: fa-stack-1x dla ikonki głównej oraz fa-stack-2x dla ikonki mającej służyć za tło. Kod dla pokazanego wcześniej domku w kwadracie będzie wyglądał następująco: <span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x"></i>
</span>
W tym przypadku do ikonki głównej musiałam dopisać fa-inverse aby odznaczała się na ikonce tła, której kolor jest przecież taki sam. <span class="fa-stack fa-lg">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-bug fa-stack-1x fa-inverse"></i>
</span>

Zmiana koloru

Zmiana koloru ikonek jest bardzo prosta. Każda ikonka ma nadaną klasę .fa i to do niej dopisujemy kolor, na jaki chcielibyśmy, aby nasza ikonka się wyświetlała. .fa {color: wartość;}

Kredyt

Poprawny kredyt Fontu Awesome wygląda następująco: "Font Awesome by Dave Gandy - http://fontawesome.io" lub: "Font Awesome by Dave Gandy."

13 komentarzy

  1. To dziwne, ale ja widziałam, że czcionki jak się dodaje w HTML zawsze dawać pod head. Mnie zawsze tak działało. Ale cóż. Każdy ma swoje sposoby. Bardzo ciekawa instrukcja. :3 Z chęcią będę z niej korzystać. Mam takie pytanie: Czy nie ma podobnej stronki do google font? Tam te czcionki mi się znudziły, a nie ma zbytnio dużo nowych czcionek ze znakami polskimi.

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeżeli działało, to dobrze. :) Co do czcionek, to niestety nie znam innej strony oferującej fonty w takiej formie. Natomiast jeżeli posiada się własnego dropboxa, to można użyć go jako serwera do dowolnej czcionki, wystarczy wrzucić ją na dropboxa, udostępnić jak to się robi z obrazkami czy tez podglądem szablonów, a następnie postępować wg tej instrukcji na font-face.

      Usuń
    2. A le jeśli wrzucę czcionkę z dropboxa, to czy będzie widoczna na innych komputerach?

      Usuń
    3. I gdzie je wstawić? Normalnie pod jak z czcionkami z google?

      Usuń
  2. Witam, nigdzie nie umiem znaleźć jakiejś zakładki o zapytania, więc piszę o tym tutaj. Chciałabym zamieścić ten szablon u siebie: http://www.soratemplates.com/2015/01/cocktail-blogger-templates.html Nie potrafię jednak zrobić tego poprawnie. Czy ktoś na moją prośbę mógłby to zrobić?

    Pozdrawiam Serdecznie!

    OdpowiedzUsuń
  3. A może w kolejnym instruktażu przejścia i różne hovery do menu/linków? :)

    OdpowiedzUsuń
  4. Hej :)
    Wiem, że minęło sporo czasu od ostatniej notki i nie wiem czy ktokolwiek tu w ogóle zagląda, ale spróbować warto ;)
    Da się zrobić standardowy wygląd bloga (np. jedna notka na głównej) i kafelki jak w szablonie Clever po wybraniu etykiety?

    OdpowiedzUsuń

© Agata | WS | x.