Niesamowite ikony czcionek

Biblioteka ikon Font Awesome zawiera 519 darmowych skalowalnych ikon wektorowych. Ta biblioteka jest całkowicie bezpłatna zarówno do użytku osobistego, jak i komercyjnego. Pierwotnie zaprojektowane dla Bootstrap ikony te można łatwo dostosować.

Ładowanie biblioteki czcionek

Aby załadować bibliotekę Font Awesome, skopiuj i wklej następujący wiersz w sekcji <head> strony internetowej.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Korzystanie z Icon

Font Awesome udostępnia kilka ikon. Wybierz jedną z nich i dodaj nazwę klasy icon do dowolnego elementu HTML w tagu <body>. W poniższym przykładzie użyliśmy ikony indyjskiej waluty.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Wytworzy następujący wynik -

Definiowanie rozmiaru

Możesz zwiększyć lub zmniejszyć rozmiar ikony, definiując jej rozmiar za pomocą CSS i używając go razem z nazwą klasy, jak pokazano poniżej. W podanym przykładzie zadeklarowaliśmy rozmiar jako 6 em.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Wytworzy następujący wynik -

Definiowanie koloru

Podobnie jak rozmiar, możesz zdefiniować kolor ikon za pomocą CSS. Poniższy przykład pokazuje, jak zmienić kolor ikony waluty indyjskiej.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Lista kategorii

Font Awesome udostępnia 519 ikon w następujących kategoriach -

  • Ikony aplikacji sieci Web
  • Ikony dłoni
  • Ikony transportu
  • Ikony płci
  • Ikony typu pliku
  • Ikony tarczy
  • Ikony kontroli formularza
  • Ikony płatności
  • Ikony wykresu
  • Ikony walut
  • Ikony edytora tekstu
  • Ikony kierunkowe
  • Ikony odtwarzacza wideo
  • Ikony marki

Aby użyć którejkolwiek z tych ikon, musisz zastąpić nazwę klasy w programach podanych w tym rozdziale nazwą klasy żądanej ikony. W następnych rozdziałach tego działu (Font Awesome) wyjaśniliśmy z punktu widzenia kategorii użycie i odpowiednie wyniki różnych ikon Font Awesome.