Учебники

Значки материалов

Октябрь 6, 2018

Google предоставляет набор из 750 значков, разработанных в соответствии с «рекомендациями по дизайну материалов», которые называются значками « Дизайн материалов» . Эти значки просты и поддерживают все современные веб-браузеры. Поскольку эти значки являются векторными, они также масштабируемы. Чтобы использовать эти иконки, мы должны загрузить шрифт (библиотеку) материала-иконки .

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

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

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

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

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

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

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

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

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

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

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

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

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

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

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

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

Шрифт Google Material Icons предоставляет 519 значков в следующих категориях —

  • Иконки действий
  • Значки оповещений
  • AV иконки
  • Иконки общения
  • Значки содержимого
  • Значки устройств
  • Значки редактора
  • Иконки файлов
  • Аппаратные иконки
  • Иконки изображений
  • Карты Иконки
  • Иконки навигации
  • Значки уведомлений
  • Социальные иконки
  • Значки переключения

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

45
Share: