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.