Учебники

Font Awesome Icons

Октябрь 6, 2018

Библиотека Font Awesome icons предоставляет 519 бесплатных масштабируемых векторных иконок. Эта библиотека абсолютно бесплатна для личного и коммерческого использования. Первоначально разработанные для Bootstrap, эти значки можно легко настроить.

Загрузка библиотеки шрифтов

Чтобы загрузить библиотеку Font Awesome, скопируйте и вставьте следующую строку в раздел <head> веб-страницы. 

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

Использование иконки

Font Awesome предоставляет несколько иконок. Выберите один из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали иконку индийской валюты.

Live Demo 

<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>

Это даст следующий результат —

Определение размера

Вы можете увеличивать или уменьшать размер значка, определяя его размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере мы объявили размер 6 em.

Live Demo 

<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>

Это даст следующий результат —

Определение цвета

Как и размер, вы можете определить цвет значков с помощью CSS. В следующем примере показано, как изменить цвет значка индийской валюты.

Live Demo 

<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>

Список категорий

Font Awesome предоставляет 519 иконок в следующих категориях —

  • Значки веб-приложений
  • Иконки рук
  • Транспортные иконки
  • Гендерные иконки
  • Значки типов файлов
  • Значки Spinner
  • Значки управления формой
  • Платежные иконки
  • Иконки Диаграммы
  • Иконки валют
  • Текстовый редактор Иконки
  • Направленные значки
  • Иконки видеоплеера
  • Иконки бренда

Чтобы использовать любой из этих значков, вы должны заменить имя класса в программах, приведенных в этой главе, на имя класса нужного значка. В следующих главах этого раздела (Font Awesome) мы объяснили по категориям использование и соответствующие выводы различных значков Font Awesome.

46
Share: