Chodzi mi tutaj o taki efekt:
Nie jest to trudne do zrobienia, nie trzeba się bawić w HTMLu - wystarczy nam do tego CSS, a jeśli ominął Cię pierwszy wpis o Font Awesome, to zapraszam Cię do na niego właśnie teraz. Tam pokrótce opowiadam o zasadzie działania, gdzie znajdziesz ikonki i jak zrobić za pomocą nich gadżet z ikonkami społecznościowymi.
Pierwszy wpis o Font Awesome
1. Przechodzimy do szablon - edytuj kod HTML
2. Nad <head> wklejamy:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
3. Zapisujemy szablon
4. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
5. Wklejamy kod:
#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}
Analiza kodu:
#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}
Część odpowiadająca za font - rodzaj, wielkość, grubość
Kolor linków w pagerze
Kolor linków po najechaniu
Ikonki z Font Awesome
Jak wyszukać numerków ikonek Font Awesome?
Przechodzimy na tę stronę -
KLIK
Wyszukujemy ikonkę, jaką chcemy użyć
Po wyszukaniu, klikamy na daną ikonkę - przeniesie nas na podstronę. Na dole pod ikonką będziemy mieli numerek.
Narzędzie Gradient (G) 
Narzędzie Kroplomierz (I) i Narzędzie Miarka - Kroplomierz pozwala na pobieranie koloru. Narzędzie miarki, służy do mierzenie odległości między dwoma punktami.
Narzędzie lupa (Z) 
Narzędzie Generator kształtów (Shift+M), Narzędzie Aktywne wiadro z farbą (K) i Narzędzie Zaznaczenia aktywnego malowania (Shift+L) - Generator kształtów służy do tworzenia własnych kształtów, które powstają za pomocą łączenia prostych utworzonych kształtów. Aktywne wiadro z farbą maluje zaznaczone elementy. Narzędzie zaznaczenia aktywnego malowania, służy do zaznacza obiekt, który malowaliśmy. 
Narzędzie obszaru roboczego (Shift+O) - pozwala na stworzenie nowego obszaru roboczego, obok tego, na którym już pracujemy o tej samej wielkości. 
Narzędzie Tworzenia przejść (W) - możemy tworzyć przejścia między obiektami o różnych kolorach oraz kształtach. 
Narzędzie Przekształcanie Swobodne (E) 
Narzędzie Obracania (R) i Narzędzie Odbijania (O) 
