Font Awesome

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."