ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY JAVA XML БОЛЬШЕ 🔍 ◑ КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Иконки

❮ Prev Next ❯

Библиотеки иконок

С W3.CSS вы можете использовать понравившуюся вам библиотеку иконок, такую как:

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

Чтобы вставить иконку:

  1. Подключите библиотеку иконок из CDN (Content Delivery Network / Сети доставки контента) в разделе <head> веб-страницы.
  2. Добавьте имя класса иконки в любой встроенный элемент HTML.

Совет: Элементы <i> и <span> широко используются для добавления иконок.

Чтобы контролировать размер иконки, измените свойство font-size иконки или используйте один из классов w3-размер:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo

Некоторые иконки из библиотеки Font Awesome


fa fa-home

fa fa-bars

fa fa-arrow-left

fa fa-arrow-right

fa fa-search

fa fa-close

fa fa-refresh

fa fa-trash

fa fa-male

fa fa-car

fa fa-truck

fa fa-plane

Пример

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

home
home
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
search
search
close
close
refresh
refresh
delete
delete
person
person
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport

Пример

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


home

menu-hamburger

arrow_back

arrow_forward


search

remove

refresh

trash


user

file

print

plane

Пример

<!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>
Попробуйте сами »

Все библиотеки иконок подключаются также, как и обычная внешняя таблица стилей - с помощью ссылки на необходимую таблицу стилей (файл с расширением .css). При этом файл таблицы стилей может находиться как на стороннем ресурсе - CDN, так и непосредственно на самом сайте.

❮ Prev Next ❯