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

kuci    644

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
BlackIce    3,525

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.

  • Podobna zawartość

    • Przez kuci
      Ogólny, styl zaczerpnięty od newdiablomod - konwertowany z IPB na myBB nie jest skończony ale myślę że lepiej wrzucić niż ma się marnować. Nie jest czysto pisany od zera także nie przypisuje sobie żadnych zasług. Przejrzysty szablon pod 1.8.x wzorowany na skrypcie IP:Board 3.
       
      Autor: MarcinProjekt & @kuci
      Wersja MyBB: 1.8.x
       
      Pobierz: FenixNDM-theme.rar
       
      Demo:

       
      Changelog:
      v1 - poprawiony niedziałający javascript w menu + sidebar. ` 2016-06-21
    • Przez creet.
      Witam wszystkich zainteresowanych, chciałbym sprzedać kilka moich projektów graficznych pod fora internetowe. Projekty przygotowywane były z myślą o MyBB, ale sądzę, że po kilku drobnych zmianach będą również pasować do innych silników forów. W każdym z projektów warstwy są odpowiednio pogrupowane i szczegółowo opisane tak, aby koder miał ułatwioną pracę i nie musiał niczego szukać. Moim zdaniem jak na tak małą kwotę za jaką możecie kupić te projekty to grafika jest na prawdę na niezłym poziomie i prace zachowują estetykę, dzięki nim na pewno nie pozostaniecie kolejnym przeciętnie wyglądającym forum jakich w internecie pełno.
       
      Cena: Do uzgodnienia, jak już napisałem powyżej, będzie to niska cena jak na taki poziom prac (nie są takie złe prawda? :P).
      Płatność: PayPal/Przelew
      Kontakt: Prywatna wiadomość na forum i/lub Gadu Gadu - 18922430
      Allegro: Nie przesadzajmy, cena projektów jest zbyt niska żeby wystawiać je na allegro, ale jeżeli klient wyrazi taką chęć to mogę wystawić, lecz to już na jego koszt, bo mi osobiście wystawianie na allegro po prostu się nie opłaca.
      Zdjęcia:
      1.
       
      2.
       
    • Przez Tomasz
      Autor: DaFont
      Opis: Darmowa czcionka używana w logu gry Call of Duty. Bazowana na czcionce "Impact"
      Demo:

      Pobierz: call_of_ops_duty.zip
    • Przez st4ge
      Witam, jaka czcionka najładniej wygląda na forum? Chodzi mi jaką robić layout, bo chciałbym spróbować.
    • Przez Tomasz
      Autor: Valve Corporation
      Opis: Darmowe czcionki używane w grze Team Fortress 2.
      Demo:
      TF2:
       
      TF2 Secondary: 

      TF2 Build: 

      TF2 Professor:
       
      Pobierz:
      TF2: tf2.zip
      TF2 Secondary: tf2_secondary.zip
      TF2 Build: tf2_build.zip
      TF2 Professor: tf2_professor.zip
       
       
  • Ostatnie tematy

×