Учебники

W3.CSS — Иконки

Ноябрь 23, 2018

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

  • Font Awesome Icons

  • Google Material Icons

  • Bootstrap Иконки

Font Awesome Icons

Google Material Icons

Bootstrap Иконки

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

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

Старший Имя класса и описание
1

w3-крошечное

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

2

w3-маленький

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

3

w3-большой

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

4

w3-XLarge

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

5

w3-XXLarge

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

6

w3-XXXLarge

Рисует иконку очень высокого очень большого размера.

w3-крошечное

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

w3-маленький

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

w3-большой

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

w3-XLarge

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

w3-XXLarge

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

w3-XXXLarge

Рисует иконку очень высокого очень большого размера.

пример

w3css_icons.htm

Live Demo

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

Результат

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

43
Share: