Иконки W3.CSS
Библиотеки иконок
С W3.CSS вы можете использовать понравившуюся вам библиотеку иконок, например:
- Иконки Font Awesome
- Иконки Google Material Design
- Иконки начальной загрузки
Использование библиотеки иконок
Чтобы вставить значок:
- Включите библиотеку значков из CDN (сети доставки контента) в раздел <head>.
- Добавьте имя класса значка в любой встроенный элемент HTML.
Совет: элементы <i> и <span> широко используются для добавления значков.
Чтобы управлять размером значка, измените свойство font-size значка или используйте один из классов w3 - size :
- w3-крошечный
- w3-маленький
- w3-большой
- w3-xxlarge
- w3-xxxlarge
- w3-джамбо
Некоторые иконки Font Awesome
фа фа-дом
фа-бары
fa fa-стрелка влево
fa fa-стрелка-вправо
fa fa-поиск
фа фа-закрыть
фа фа-обновить
фа фа-мусор
больно
фа фа-автомобиль
фа-фа-грузовик
фа-фа-самолет
Пример
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Полный список значков: Посетите наш справочник по значкам.
Некоторые иконки Google Material Design
домой
домой
домой
меню
меню
меню
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
поиск
поиск
поиск
Закрыть
Закрыть
Закрыть
обновить
обновить
обновить
Удалить
Удалить
Удалить
человек
человек
человек
направления_автомобиль
направления_автомобиль
направления_автомобиль
local_shipping
local_shipping
local_shipping
местный_аэропорт
местный_аэропорт
местный_аэропорт
Пример
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Некоторые иконки Bootstrap
домой
меню гамбургер
arrow_back
arrow_forward
поиск
Удалить
обновить
мусор
Пользователь
файл
Распечатать
самолет
Пример
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>