Учебники

Материализация — Иконы

Июль 26, 2018

Materialize поддерживает следующие популярные библиотеки значков —

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Иконки

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

Чтобы использовать значок, поместите имя значка в класс HTML-элемента <i>. Чтобы контролировать размер иконки, вы можете использовать следующие классы —

Sr.No. Имя класса и описание
1

крошечный

Рисует иконку очень маленького размера. 1rem.

2

маленький

Рисует иконку небольшого размера. 2rem.

3

Средняя

Рисует иконку среднего размера. 4rem.

4

большой

Рисует иконку большого размера. 6rem.

крошечный

Рисует иконку очень маленького размера. 1rem.

маленький

Рисует иконку небольшого размера. 2rem.

Средняя

Рисует иконку среднего размера. 4rem.

большой

Рисует иконку большого размера. 6rem.

пример

materialize_icons.htm 

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "container"> 
      <h2>Icons Demo</h2>
      <hr/>
      
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud tiny"></i>
      <i class = "fa fa-cloud"></i>	  
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud medium"></i>
      <i class = "fa fa-cloud large"></i>     
      
      <h3>Google Material Design Icon Demo</h3>	  
      <i class = "material-icons tiny">cloud</i>
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons medium">cloud</i>
      <i class = "material-icons large">cloud</i>      
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud tiny"></i>
      <i class = "glyphicon glyphicon-cloud"></i>      
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud medium"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>      
   </body>  
</html>

Результат

Проверьте результат.

38
Share: