Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

kuci

Font Awesome - czyli darmowe wektorowe ikonki.

Promowane odpowiedzi

Witajcie, zapewne każdy z was nie raz spotkał się z np. ładnym menu w którym oprócz tekstu znajdziemy jeszcze dołączone do niego ikonki w celach stylistycznych. Wiadomo , że nie każdemu chce się do każdego projektu tworzyć unikalny pakiet ikonek dlatego przychodzę tu z poradnikiem.

 

Font Awesome - czyli darmowe wektorowe ikonki które pobierane są z arkuszy styli można je obracać czy nakładać na siebie. Dostępne jest również kilka ikonek które w sobie mają animacje.

 

Instalacja:

Pobieramy paczke ikonek z oryginalnej strony :

http://fortawesome.github.io/Font-Awesome/

Z racja że te ikony to nic innego niż dołączony styl.css musimy podpiąć go do naszej strony w sekcji <head></head> np:

<head>
<link rel="stylesheet" href="css/font-awesome.min.css">	
<link rel="stylesheet" href="css/font-awesome.css">	
</head>

Kiedy mamy już "podpięte " ikonki możemy przejść do zaimplementowania ich na naszej stronie czyli:

Najpierw wybieramy jaka ikonka nam się podoba ( korzystamy z ich strony na której mamy dostęp do podglądu wszystkich ikon):

http://fortawesome.github.io/Font-Awesome/icons/

 

Powiedzmy że wybierzemy dwie:

Percent

usb

 

Klikamy w nie i mamy tam podany kod html który wklejamy do naszej stronki dla przykładu:

<i class="fa fa-percent"></i> tu będzie nasz procent
<i class="fa fa-usb"></i> tu będzie USB

Warto również wspomnieć o ich wielkości skoro jest to wielkość wektorowa możemy spokojnie zwiększać jej rozmiar (bo standardowo jest to mała ikonka)

Aby zwiększyć rozmiar ikonki musimy dodać klasę a mamy taki wybór:

fa-lg fa-2x fa-3x fa-4x fa-5x

 

czyli np:

<i class="fa fa-percent fa-3x"></i>

 

Teraz jak wyglądają rozmiary:

56d02497e5910_Beztytuu.png.bc74733911fc9

 

Tak więc myśle, że coś tam opowiedziałem o font-awesome dodam jeszcze że to nie wszystkie funkcje. Możemy jeszcze obracać ikonki za pomocą klasy: fa-rotate-*  oraz fa-flip-*

 

Przykład:

56d025e767660_Beztytuu.png.81f3939d92a3a

 

przykładowy kod:

<i class="fa fa-bar-chart fa-rotate-90 fa-3x"></i> fa-rotate-90

 

Przykłady z animacją znajdziecie tu:

http://fortawesome.github.io/Font-Awesome/examples/

 

na dole strony ;)

Edytowane przez kuci
  • Lubię to! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

To dorzucę swoje 5 groszy jak już powstał taki temat. To co jest powyżej, to jak najbardziej wszystko jest poprawne, ale... Nie musimy ściągać fonta i umieszczać go na serwerze. Wystarczy umieścić poniższy kod w sekcji <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Serwer, na którym umieszczony jest CSS jest na tyle stabilny i bezpieczny, że warto zaoszczędzić sobie troszkę pracy i miejsca na własnym serwerze. Po umieszczeniu tego kodu możemy posługiwać się już klasami wymienionymi w poście powyżej.

 

Co do kodu od @kuci w miejscu gdzie opisuje <head>, wystarczy samo:

<link rel="stylesheet" href="css/font-awesome.min.css">	

CSS bez 'min' w nazwie, to ten sam kod, ale ładniej ułożony, a przeglądarkę nie interesuje jak kod jest ułożony. Natomiast ten z 'min' wczyta ułamek sekundy szybciej :)

 

Aha! Bym zapomniał. Jeżeli chcecie wykorzystać FA (FontAwesome) w pseudoelemencie ::before lub ::after wystarczy skorzystać z tego linku: https://fortawesome.github.io/Font-Awesome/cheatsheet/. To co jest na szaro w nawiasach kwadratowych obok ikonki, to jest ta wartość (no prawie), którą należy wpisać w content. A tutaj przykład dla klasy 'fa-500px':

selektor::before {
  content: '\f26e';
  font-family: 'FontAwesome', sans-serif
}

Myślę, że wytłumaczyłem - najbardziej "łopatologicznie" jak umiałem. W razie problemów załóż temat na forum w odpowiednim dziale i podlinkuj poradnik z którego korzystałeś(aś) :)

  • Lubię to! 6

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×