Веб-иконки — Введение
Значок — это символ, который используется для обозначения определенного действия или возможности на веб-странице. Иконки используются в документах, а также в приложениях, и они могут быть как выбираемыми, так и не выбираемыми. Например, все изображения, которые мы видим на кнопках приложения, представляют собой значки, и эти кнопки можно выбирать. Точно так же, когда мы используем значок в качестве логотипа компании, его обычно нельзя выбрать.
В среде Windows, если мы отключим системный том, он будет представлен с помощью значка, как показано ниже.
Используя веб-значки, мы можем представить загрузочную страницу, отключенную опцию, ссылку, перенаправление и т. Д. Эти значки можно перевернуть, повернуть, изменить размер, ограничить, перевернуть и раскрасить.
Иконочные шрифты
Иконочные шрифты содержат символы и глифы. Как только вы загрузите нужный шрифт, вы можете использовать любой из значков, предоставленных этим шрифтом, используя имя класса значка. Мы также можем применять различные цвета к значкам и изменять их размер, используя свойства CSS. Существует несколько библиотек значков (шрифтов), которые предоставляют значки. Этот урок фокусируется на трех основных шрифтах, а именно —
- Font Awesome
- Бутстрап Глификоны
- Значки материалов Google
Font Awesome
Этот шрифт предоставляет 519 бесплатных масштабируемых векторных иконок. Эта библиотека абсолютно бесплатна как для личного, так и для коммерческого использования. Эти значки можно легко настроить. Первоначально они были разработаны для Bootstrap.
Бутстрап Глификоны
Это библиотека монохромных иконок, доступных в растровых форматах, векторных форматах и в виде шрифтов. Он обеспечивает более 250 символов в формате шрифта. Вы можете использовать эти шрифты в своих веб-проектах. Эти значки не являются бесплатными, однако вы можете использовать их в проектах на основе Bootstrap без необходимости их покупки.
Значки материалов Google
Google предоставляет около 750 значков, разработанных в соответствии с «правилами, разработанными для материалов», и они называются значками Material Design . Эти значки просты и поддерживают все современные веб-браузеры. Поскольку эти значки являются векторными, они также масштабируемы. Чтобы использовать эти иконки, мы должны загрузить шрифт (библиотеку) материала-иконки .
Font Awesome Icons
Библиотека Font Awesome icons предоставляет 519 бесплатных масштабируемых векторных иконок. Эта библиотека абсолютно бесплатна для личного и коммерческого использования. Первоначально разработанные для Bootstrap, эти значки можно легко настроить.
Загрузка библиотеки шрифтов
Чтобы загрузить библиотеку Font Awesome, скопируйте и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> </head>
Использование иконки
Font Awesome предоставляет несколько иконок. Выберите один из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали иконку индийской валюты.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<i class = "fa fa-inr"></i>
</body>
</html>
Это даст следующий результат —
Определение размера
Вы можете увеличивать или уменьшать размер значка, определяя его размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере мы объявили размер 6 em.
<html>
<head>
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.mysize {font-size: 10em;}
</style>
</head>
<body>
<i class = "fa fa-inr mysize"></i>
</body>
</html>
Это даст следующий результат —
Определение цвета
Как и размер, вы можете определить цвет значков с помощью CSS. В следующем примере показано, как изменить цвет значка индийской валюты.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 6em; color: red;}
</style>
</head>
<body>
<i class = "fa fa-inr custom"></i>
</body>
</html>
Список категорий
Font Awesome предоставляет 519 иконок в следующих категориях —
- Значки веб-приложений
- Иконки рук
- Транспортные иконки
- Гендерные иконки
- Значки типов файлов
- Значки Spinner
- Значки управления формой
- Платежные иконки
- Иконки Диаграммы
- Иконки валют
- Текстовый редактор Иконки
- Направленные значки
- Иконки видеоплеера
- Иконки бренда
Чтобы использовать любой из этих значков, вы должны заменить имя класса в программах, приведенных в этой главе, на имя класса нужного значка. В следующих главах этого раздела (Font Awesome) мы объяснили по категориям использование и соответствующие выводы различных значков Font Awesome.
Font Awesome — иконки веб-приложений
В этой главе описывается использование значков Font Awesome Web Application. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Web Application. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-Adjust custom»> </ i> | |
| <i class = «fa fa-anchor custom»> </ i> | |
| <i class = «fa fa-archive custom»> </ i> | |
| <i class = «fa fa-area-chart custom»> </ i> | |
| <i class = «fa fa-arrow custom»> </ i> | |
| <i class = «fa fa-arrow-h custom»> </ i> | |
| <i class = «fa fa-arrow-v custom»> </ i> | |
| <i class = «fa fa-asterisk custom»> </ i> | |
| <i class = «fa fa-at custom»> </ i> | |
| <i class = «fa fa-car custom»> </ i> | |
| <i class = «fa fa-balance-scale custom»> </ i> | |
| <i class = «fa fa-ban custom»> </ i> | |
| <i class = «fa fa-bank custom»> </ i> | |
| <i class = «fa fa-bar-chart custom»> </ i> | |
| <i class = «fa fa-bar-chart-o custom»> </ i> | |
| <i class = «fa fa-barcode custom»> </ i> | |
| <i class = «fa fa-bars custom»> </ i> | |
| <i class = «fa fa-bed custom»> </ i> | |
| <i class = «fa fa-beer custom»> </ i> | |
| <i class = «fa fa-bell custom»> </ i> | |
| <i class = «fa fa-wrench custom»> </ i> | |
| <i class = «fa fa-bell-o custom»> </ i> | |
| <i class = «fa fa-bell-slash custom»> </ i> | |
| <i class = «fa fa-bell-slash-o custom»> </ i> | |
| <i class = «fa fa-bike custom»> </ i> | |
| <i class = «fa fa-battery-0 custom»> </ i> | |
| <i class = «fa fa-battery-1 custom»> </ i> | |
| <i class = «fa fa-battery-2 custom»> </ i> | |
| <i class = «fa fa-battery-3 custom»> </ i> | |
| <i class = «fa fa-battery-4 custom»> </ i> | |
| <i class = «fa fa-battery-empty custom»> </ i> | |
| <i class = «fa fa-battery-четверти обычай»> </ I> | |
| <i class = «fa fa-battery-half custom»> </ i> | |
| <я класс = «fa fa-battery-три четверти обычай»> </ I> | |
| <i class = «fa fa-battery-full custom»> </ i> | |
| <i class = «fa fa-birthday-cake custom»> </ i> | |
| <i class = «fa fa-bolt custom»> </ i> | |
| <i class = «fa fa-bomb custom»> </ i> | |
| <i class = «fa fa-book custom»> </ i> | |
| <i class = «fa fa-bookmark custom»> </ i> | |
| <i class = «fa fa-bookmark-o custom»> </ i> | |
| <i class = «fa fa-портфель custom»> </ i> | |
| <i class = «fa fa-bug custom»> </ i> | |
| <i class = «fa fa-building custom»> </ i> | |
| <i class = «fa fa-building-o custom»> </ i> | |
| <i class = «fa fa-bullhorn custom»> </ i> | |
| <i class = «fa fa-bullseye custom»> </ i> | |
| <i class = «fa fa-bus custom»> </ i> | |
| <i class = «fa fa-cab custom»> </ i> | |
| <i class = «fa fa-video-camera custom»> </ i> | |
| <i class = «fa fa-calendar custom»> </ i> | |
| <i class = «fa fa-calendar-check-o custom»> </ i> | |
| <i class = «fa fa-calendar-minus-o custom»> </ i> | |
| <i class = «fa fa-calendar-o custom»> </ i> | |
| <i class = «fa fa-calendar-plus-o custom»> </ i> | |
| <i class = «fa fa-calendar-times-o custom»> </ i> | |
| <i class = «fa fa-camera custom»> </ i> | |
| <i class = «fa fa-camera-retro custom»> </ i> | |
| <i class = «fa fa-car custom»> </ i> | |
| <i class = «fa fa-cc custom»> </ i> | |
| <i class = «fa fa-caret-square-o-down custom»> </ i> | |
| <i class = «fa fa-caret-square-o-left custom»> </ i> | |
| <i class = «fa fa-caret-square-o-right custom»> </ i> | |
| <i class = «fa fa-caret-square-o-up custom»> </ i> | |
| <i class = «fa fa-cart-arrow-down custom»> </ i> | |
| <i class = «fa fa-cart-plus custom»> </ i> | |
| <i class = «fa fa-certificate custom»> </ i> | |
| <i class = «fa fa-child custom»> </ i> | |
| <i class = «fa fa-check custom»> </ i> | |
| <i class = «fa fa-check-circle custom»> </ i> | |
| <i class = «fa fa-check-circle-o custom»> </ i> | |
| <i class = «fa fa-check-square custom»> </ i> | |
| <i class = «fa fa-check-square-o custom»> </ i> | |
| <i class = «fa fa-circle custom»> </ i> | |
| <i class = «fa fa-circle-o custom»> </ i> | |
| <i class = «fa fa-circle-o-notch custom»> </ i> | |
| <i class = «fa fa-circle-thin custom»> </ i> | |
| <i class = «fa fa-clock-o custom»> </ i> | |
| <i class = «fa fa-clone custom»> </ i> | |
| <i class = «fa fa-close custom»> </ i> | |
| <i class = «fa fa-anchor custom»> </ i> | |
| <i class = «fa fa-cloud-download custom»> </ i> | |
| <i class = «fa fa-cloud-upload custom»> </ i> | |
| <i class = «fa fa-code custom»> </ i> | |
| <i class = «fa fa-code-fork custom»> </ i> | |
| <i class = «fa fa-coffee custom»> </ i> | |
| <i class = «fa fa-cog custom»> </ i> | |
| <i class = «fa fa-cogs custom»> </ i> | |
| <i class = «fa fa-comment custom»> </ i> | |
| <i class = «fa fa-comment-o custom»> </ i> | |
| <i class = «fa fa-commenting custom»> </ i> | |
| <i class = «fa fa-commenting-o custom»> </ i> | |
| <i class = «fa fa-comments custom»> </ i> | |
| <i class = «fa fa-comments-o custom»> </ i> | |
| <i class = «fa fa-compass custom»> </ i> | |
| <i class = «fa fa-copyright custom»> </ i> | |
| <i class = «fa fa-creative-commons custom»> </ i> | |
| <i class = «fa fa-credit-card custom»> </ i> | |
| <i class = «fa fa-crop custom»> </ i> | |
| <i class = «fa fa-crosshairs custom»> </ i> | |
| <i class = «fa fa-cube custom»> </ i> | |
| <i class = «fa fa-cubes custom»> </ i> | |
| <i class = «fa fa-cutlery custom»> </ i> | |
| <i class = «fa fa-dashboard custom»> </ i> | |
| <i class = «fa fa-database custom»> </ i> | |
| <i class = «fa fa-desktop custom»> </ i> | |
| <i class = «fa fa-diamond custom»> </ i> | |
| <i class = «fa fa-dot-circle-o custom»> </ i> | |
| <i class = «fa fa-download custom»> </ i> | |
| <i class = «fa fa-edit custom»> </ i> | |
| <i class = «fa fa-ellipsis-h custom»> </ i> | |
| <i class = «fa fa-ellipsis-v custom»> </ i> | |
| <i class = «fa fa-envelope custom»> </ i> | |
| <i class = «fa fa-envelope-o custom»> </ i> | |
| <i class = «fa fa-envelope-square custom»> </ i> | |
| <i class = «fa fa-eraser custom»> </ i> | |
| <i class = «fa fa-exchange custom»> </ i> | |
| <i class = «fa fa-exclamation custom»> </ i> | |
| <i class = «fa fa-exclamation-circle custom»> </ i> | |
| <i class = «fa fa-exclamation-triangle custom»> </ i> | |
| <i class = «fa fa-external-link custom»> </ i> | |
| <i class = «fa fa-external-link-square custom»> </ i> | |
| <i class = «fa fa-eye custom»> </ i> | |
| <i class = «fa fa-eye-slash custom»> </ i> | |
| <i class = «fa fa-eyedropper custom»> </ i> | |
| <i class = «fa fa-fax custom»> </ i> | |
| <i class = «fa fa-feed custom»> </ i> | |
| <i class = «fa fa-female custom»> </ i> | |
| <i class = «fa fa-fighter-jet custom»> </ i> | |
| <i class = «fa fa-file-archive-o custom»> </ i> | |
| <i class = «fa fa-file-audio-o custom»> </ i> | |
| <i class = «fa fa-file-code-o custom»> </ i> | |
| <i class = «fa fa-file-excel-o custom»> </ i> | |
| <i class = «fa fa-volume-down custom»> </ i> | |
| <i class = «fa fa-file-movie-o custom»> </ i> | |
| <i class = «fa fa-file-pdf-o custom»> </ i> | |
| <i class = «fa fa-file-photo-o custom»> </ i> | |
| <i class = «fa fa-file-picture-o custom»> </ i> | |
| <i class = «fa fa-file-powerpoint-o custom»> </ i> | |
| <i class = «fa fa-file-sound-o custom»> </ i> | |
| <i class = «fa fa-file-video-o custom»> </ i> | |
| <i class = «fa fa-file-word-o custom»> </ i> | |
| <i class = «fa fa-file-sound-o custom»> </ i> | |
| <i class = «fa fa-file-video-o custom»> </ i> | |
| <i class = «fa fa-file-word-o custom»> </ i> | |
| <i class = «fa fa-file-zip-o custom»> </ i> | |
| <i class = «fa fa-film custom»> </ i> | |
| <i class = «fa fa-filter custom»> </ i> | |
| <i class = «fa fa-fire custom»> </ i> | |
| <i class = «fa fa-fireutingisher custom»> </ i> | |
| <i class = «fa fa-flag custom»> </ i> | |
| <i class = «fa fa-flag-checkered custom»> </ i> | |
| <i class = «fa fa-flag-o custom»> </ i> | |
| <i class = «fa fa-flash custom»> </ i> | |
| <i class = «fa fa-flask custom»> </ i> | |
| <i class = «fa fa-flask custom»> </ i> | |
| <i class = «fa fa-folder custom»> </ i> | |
| <i class = «fa fa-folder-o custom»> </ i> | |
| <i class = «fa fa-folder-open custom»> </ i> | |
| <i class = «fa fa-folder-open-o custom»> </ i> | |
| <i class = «fa fa-frown-o custom»> </ i> | |
| <i class = «fa fa-volume-off custom»> </ i> | |
| <i class = «fa fa-gamepad custom»> </ i> | |
| <i class = «fa fa-gavel custom»> </ i> | |
| <i class = «fa fa-gear custom»> </ i> | |
| <i class = «fa fa-gears custom»> </ i> | |
| <i class = «fa fa-gift custom»> </ i> | |
| <i class = «fa fa-glass custom»> </ i> | |
| <i class = «fa fa-globe custom»> </ i> | |
| <i class = «fa fa-градация-шапка обычай»> </ i> | |
| <i class = «fa fa-group custom»> </ i> | |
| <i class = «fa fa-hand-grab-o custom»> </ i> | |
| <i class = «fa fa-hand-lizard-o custom»> </ i> | |
| <i class = «fa fa-hand-paper-o custom»> </ i> | |
| <i class = «fa fa-hand-peace-o custom»> </ i> | |
| <i class = «fa fa-hand-pointer-o custom»> </ i> | |
| <i class = «fa fa-hand-rock-o custom»> </ i> | |
| <i class = «fa fa-hand-scissors-o custom»> </ i> | |
| <i class = «fa fa-hand-spock-o custom»> </ i> | |
| <i class = «fa fa-hand-paper-o custom»> </ i> | |
| <i class = «fa fa-hdd-o custom»> </ i> | |
| <i class = «fa fa-наушники custom»> </ i> | |
| <i class = «fa fa-heart custom»> </ i> | |
| <i class = «fa fa-heart-o custom»> </ i> | |
| <i class = «fa fa-heartbeat custom»> </ i> | |
| <i class = «fa fa-history custom»> </ i> | |
| <i class = «fa fa-home custom»> </ i> | |
| <i class = «fa fa-hotel custom»> </ i> | |
| <i class = «fa fa-hourglass custom»> </ i> | |
| <i class = «fa fa-hourglass-start custom»> </ i> | |
| <i class = «fa fa-hourglass-half custom»> </ i> | |
| <i class = «fa fa-hourglass-end custom»> </ i> | |
| <i class = «fa fa-i-cursor custom»> </ i> | |
| <i class = «fa fa-image custom»> </ i> | |
| <i class = «fa fa-inbox custom»> </ i> | |
| <i class = «fa fa-industry custom»> </ i> | |
| <i class = «fa fa-info custom»> </ i> | |
| <i class = «fa fa-info-circle custom»> </ i> | |
| <i class = «fa fa-agency custom»> </ i> | |
| <i class = «fa fa-key custom»> </ i> | |
| <i class = «fa fa-keyboard-o custom»> </ i> | |
| <i class = «fa fa-language custom»> </ i> | |
| <i class = «fa fa-laptop custom»> </ i> | |
| <i class = «fa fa-leaf custom»> </ i> | |
| <i class = «fa fa-legal custom»> </ i> | |
| <i class = «fa fa-lemon-o custom»> </ I> | |
| <i class = «fa fa-level-down custom»> </ i> | |
| <i class = «fa fa-level-up custom»> </ i> | |
| <i class = «fa fa-life-bouy custom»> </ I> | |
| <i class = «fa fa-life-ring custom»> </ i> | |
| <i class = «fa fa-life-saver custom»> </ i> | |
| <i class = «fa fa-lightbulb-o custom»> </ i> | |
| <i class = «fa fa-line-chart custom»> </ i> | |
| <i class = «fa fa-location-arrow custom»> </ i> | |
| <i class = «fa fa-lock custom»> </ i> | |
| <i class = «fa fa-magic custom»> </ i> | |
| <i class = «fa fa-magnet custom»> </ i> | |
| <i class = «fa fa-mail-forward custom»> </ i> | |
| <i class = «fa fa-mail-reply custom»> </ i> | |
| <i class = «fa fa-mail-reply-all custom»> </ i> | |
| <i class = «fa fa-male custom»> </ i> | |
| <i class = «fa fa-map custom»> </ i> | |
| <i class = «fa fa-map-marker custom»> </ i> | |
| <i class = «fa fa-map-o custom»> </ i> | |
| <i class = «fa fa-map-pin custom»> </ i> | |
| <i class = «fa fa-map-signs custom»> </ i> | |
| <i class = «fa fa-meh-o custom»> </ i> | |
| <i class = «fa fa-mic custom»> </ i> | |
| <i class = «fa fa-микрофон-слэш обычай»> </ i> | |
| <i class = «fa fa-minus custom»> </ i> | |
| <i class = «fa fa-minus-circle custom»> </ i> | |
| <i class = «fa fa-minus-square custom»> </ i> | |
| <i class = «fa fa-minus-square-o custom»> </ i> | |
| <i class = «fa fa-mobile custom»> </ i> | |
| <i class = «fa fa-money custom»> </ i> | |
| <i class = «fa fa-moon-o custom»> </ i> | |
| <i class = «fa fa-mortar-board custom»> </ i> | |
| <i class = «fa fa-motorcycle custom»> </ i> | |
| <i class = «fa fa-mouse-pointer custom»> </ i> | |
| <i class = «fa fa-music custom»> </ i> | |
| <i class = «fa fa-users custom»> </ i> | |
| <i class = «fa fa-object-group custom»> </ i> | |
| <i class = «fa fa-object-ungroup custom»> </ i> | |
| <i class = «fa fa-paint-brush custom»> </ i> | |
| <i class = «fa fa-paper-plane custom»> </ i> | |
| <i class = «fa fa-paper-plane-o custom»> </ i> | |
| <i class = «fa fa-paw custom»> </ i> | |
| <i class = «fa fa -cil custom»> </ i> | |
| <i class = «fa fa -cil-square custom»> </ i> | |
| <i class = «fa fa -cil-square-o custom»> </ i> | |
| <i class = «fa fa-phone custom»> </ i> | |
| <i class = «fa fa-phone custom»> </ i> | |
| <i class = «fa fa-photo custom»> </ i> | |
| <i class = «fa fa-picture-o custom»> </ i> | |
| <i class = «fa fa-pie-chart custom»> </ i> | |
| <i class = «fa fa-plane custom»> </ i> | |
| <i class = «fa fa-volume-up custom»> </ i> | |
| <i class = «fa fa-plus custom»> </ i> | |
| <i class = «fa fa-plus-circle custom»> </ i> | |
| <i class = «fa fa-plus-square custom»> </ i> | |
| <i class = «fa fa-plus-square-o custom»> </ i> | |
| <i class = «fa fa-power-off custom»> </ i> | |
| <i class = «fa fa-print custom»> </ i> | |
| <i class = «fa fa-puzzle-piece custom»> </ i> | |
| <i class = «fa fa-qrcode custom»> </ i> | |
| <i class = «fa fa-question custom»> </ i> | |
| <i class = «fa fa-question-circle custom»> </ i> | |
| <i class = «fa fa-quote-left custom»> </ i> | |
| <i class = «fa fa-quote-right custom»> </ i> | |
| <i class = «fa fa-random custom»> </ i> | |
| <i class = «fa fa-recycle custom»> </ i> | |
| <i class = «fa fa-refresh custom»> </ i> | |
| <i class = «fa fa-зарегистрирован пользовательский»> </ i> | |
| <i class = «fa fa-remove custom»> </ i> | |
| <i class = «fa fa-reorder custom»> </ i> | |
| <i class = «fa fa-reply custom»> </ i> | |
| <i class = «fa fa-reply-all custom»> </ i> | |
| <i class = «fa fa-retweet custom»> </ i> | |
| <i class = «fa fa-road custom»> </ i> | |
| <i class = «fa fa-anchor custom»> </ i> | |
| <i class = «fa fa-rss custom»> </ i> | |
| <i class = «fa fa-rss-square custom»> </ i> | |
| <i class = «fa fa-search custom»> </ i> | |
| <i class = «fa fa-search-minus custom»> </ i> | |
| <i class = «fa fa-search-plus custom»> </ i> | |
| <i class = «fa fa-send custom»> </ i> | |
| <i class = «fa fa-send-o custom»> </ i> | |
| <i class = «fa fa-server custom»> </ i> | |
| <i class = «fa fa-share custom»> </ i> | |
| <i class = «fa fa-share-alt custom»> </ i> | |
| <i class = «fa fa-share-alt-square custom»> </ i> | |
| <i class = «fa fa-share-alt-o custom»> </ i> | |
| <i class = «fa fa-shield custom»> </ i> | |
| <i class = «fa fa-ship custom»> </ i> | |
| <i class = «fa fa-shopping-cart custom»> </ i> | |
| <i class = «fa fa-sign custom»> </ i> | |
| <i class = «fa fa-out-out custom»> </ i> | |
| <i class = «fa fa-signal custom»> </ i> | |
| <i class = «fa fa-sitemap custom»> </ i> | |
| <i class = «fa fa-sliders custom»> </ i> | |
| <i class = «fa fa-smile-o custom»> </ i> | |
| <i class = «fa fa-warning custom»> </ i> | |
| <i class = «fa fa-sort custom»> </ i> | |
| <i class = «fa fa-sort-alpha-asc custom»> </ i> | |
| <i class = «fa fa-sort-alpha-desc custom»> </ i> | |
| <i class = «fa fa-sort-asc custom»> </ i> | |
| <i class = «fa fa-sort-desc custom»> </ i> | |
| <i class = «fa fa-sort-down custom»> </ i> | |
| <i class = «fa fa-sort-numeric-asc custom»> </ i> | |
| <i class = «fa fa-sort-numeric-desc custom»> </ i> | |
| <i class = «fa fa-sort-up custom»> </ i> | |
| <i class = «fa fa-space-shuttle custom»> </ i> | |
| <i class = «fa fa-spinner custom»> </ i> | |
| <i class = «fa fa-spoon custom»> </ I> | |
| <i class = «fa fa-square custom»> </ i> | |
| <i class = «fa fa-square-o custom»> </ i> | |
| <i class = «fa fa-star custom»> </ i> | |
| <i class = «fa fa-star-half custom»> </ i> | |
| <i class = «fa fa-star-half-empty custom»> </ i> | |
| <i class = «fa fa-star-half-full custom»> </ i> | |
| <i class = «fa fa-star-half-o custom»> </ i> | |
| <i class = «fa fa-star-o custom»> </ i> | |
| <i class = «fa fa-sticky-note custom»> </ i> | |
| <i class = «fa fa-sticky-note-o custom»> </ i> | |
| <i class = «fa fa-street-custom custom»> </ i> | |
| <i class = «fa fa-suitcase custom»> </ i> | |
| <i class = «fa fa-sun-o custom»> </ i> | |
| <i class = «fa fa-support custom»> </ i> | |
| <i class = «fa fa-tablet custom»> </ i> | |
| <i class = «fa fa-tachometer custom»> </ i> | |
| <i class = «fa fa-tag custom»> </ i> | |
| <i class = «fa fa-tags custom»> </ i> | |
| <i class = «fa fa-tasks custom»> </ i> | |
| <i class = «fa fa-taxi custom»> </ i> | |
| <i class = «fa fa -levision custom»> </ i> | |
| <i class = «fa fa-терминал custom»> </ i> | |
| <i class = «fa fa-thumb-tack custom»> </ i> | |
| <i class = «fa fa-thumbs-down custom»> </ i> | |
| <i class = «fa fa-ticket custom»> </ i> | |
| <i class = «fa fa-times custom»> </ i> | |
| <i class = «fa fa-times-circle custom»> </ i> | |
| <i class = «fa fa-times-circle-o custom»> </ i> | |
| <i class = «fa fa-tint custom»> </ i> | |
| <i class = «fa fa-to-down custom»> </ i> | |
| <i class = «fa fa-toggle-left custom»> </ i> | |
| <i class = «fa fa-to-off-custom»> </ i> | |
| <i class = «fa fa-to-on custom»> </ i> | |
| <i class = «fa fa-toggle-right custom»> </ i> | |
| <i class = «fa fa-to-up-custom»> </ i> | |
| <i class = «fa fa-trademark custom»> </ i> | |
| <i class = «fa fa-tras custom»> </ i> | |
| <i class = «fa fa-trash-o custom»> </ i> | |
| <i class = «fa fa-tree custom»> </ i> | |
| <i class = «fa fa-trophy custom»> </ i> | |
| <i class = «fa fa-truck custom»> </ i> | |
| <i class = «fa fa-инвалидных колясок обычай»> </ I> | |
| <i class = «fa fa-tv custom»> </ i> | |
| <i class = «fa fa-umbrella custom»> </ i> | |
| <Я класс = «Fa Fa-University Custom»> </ I> | |
| <i class = «fa fa-unlock custom»> </ i> | |
| <i class = «fa fa-unlock-alt custom»> </ i> | |
| <i class = «fa fa-unsorted custom»> </ i> | |
| <i class = «fa fa-upload custom»> </ i> | |
| <i class = «fa fa-user custom»> </ i> | |
| <i class = «fa fa-user-plus custom»> </ i> | |
| <i class = «fa fa-user-secret custom»> </ i> | |
| <i class = «fa fa-user-times custom»> </ i> |
Font Awesome — ручные иконки
В этой главе описывается использование иконок Font Awesome Hand. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Hand. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-hand-rock-o custom»> </ i> | |
| <i class = «fa fa-hand-o-left custom»> </ i> | |
| <i class = «fa fa-hand-paper-o custom»> </ i> | |
| <i class = «fa fa-hand-rock-o custom»> </ i> | |
| <i class = «fa fa-hand-stop-o custom»> </ i> | |
| <i class = «fa fa-thumbs-o-up custom»> </ i> | |
| <i class = «fa fa-hand-lizard-o custom»> </ i> | |
| <i class = «fa fa-hand-o-right custom»> </ i> | |
| <i class = «fa fa-hand-peace-o custom»> </ i> | |
| <i class = «fa fa-hand-scissors-o custom»> </ i> | |
| <i class = «fa fa-thumbs-down custom»> </ i> | |
| <i class = «fa fa-thumbs-up custom»> </ i> | |
| <i class = «fa fa-hand-o-up custom»> </ i> | |
| <i class = «fa fa-hand-pointer-o custom»> </ i> | |
| <i class = «fa fa-hand-spock-o custom»> </ i> | |
| <i class = «fa fa-thumbs-o-down custom»> </ i> |
Font Awesome — Транспорт Иконки
В этой главе объясняется использование значков Font Awesome Transportation. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Transportation. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-ambulance custom»> </ i> | |
| <i class = «fa fa-car custom»> </ i> | |
| <i class = «fa fa-bike custom»> </ i> | |
| <i class = «fa fa-bus custom»> </ i> | |
| <i class = «fa fa-cab custom»> </ i> | |
| <i class = «fa fa-car custom»> </ i> | |
| <i class = «fa fa-fighter-jet custom»> </ i> | |
| <i class = «fa fa-motorcycle custom»> </ i> | |
| <i class = «fa fa-plane custom»> </ i> | |
| <i class = «fa fa-rocket custom»> </ i> | |
| <i class = «fa fa-ship custom»> </ i> | |
| <i class = «fa fa-space-shuttle custom»> </ i> | |
| <i class = «fa fa-subway custom»> </ i> | |
| <i class = «fa fa-taxi custom»> </ i> | |
| <i class = «fa fa-train custom»> </ i> | |
| <i class = «fa fa-truck custom»> </ i> | |
| <i class = «fa fa-инвалидных колясок обычай»> </ I> |
Font Awesome — Гендерные иконки
В этой главе объясняется использование значков Font Awesome Gender. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Gender. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-бесполый обычай»> </ i> | |
| <i class = «fa fa-intersex custom»> </ i> | |
| <i class = «fa fa-mars custom»> </ i> | |
| <i class = «fa fa-mars-double custom»> </ i> | |
| <i class = «fa fa-mars-stroke custom»> </ i> | |
| <i class = «fa fa-mars-stroke-h custom»> </ i> | |
| <i class = «fa fa-mars-stroke-v custom»> </ i> | |
| <i class = «fa fa-mercury custom»> </ i> | |
| <i class = «fa fa-neuter custom»> </ i> | |
| <i class = «fa fa-transgender custom»> </ i> | |
| <i class = «fa fa-transgender-alt custom»> </ i> | |
| <i class = «fa fa-venus custom»> </ i> | |
| <i class = «fa fa-venus-double custom»> </ i> | |
| <i class = «fa fa-venus-mars custom»> </ i> |
Font Awesome — значки типов файлов
В этой главе объясняется использование значков Font Awesome File Type. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome File Type. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-file custom»> </ i> | |
| <i class = «fa fa-file-archive-o custom»> </ i> | |
| <i class = «fa fa-file-audio-o custom»> </ i> | |
| <i class = «fa fa-file-code-o custom»> </ i> | |
| <i class = «fa fa-file-excel-o custom»> </ i> | |
| <i class = «fa fa-file-image-o custom»> </ i> | |
| <i class = «fa fa-file-movie-o custom»> </ i> | |
| <i class = «fa fa-file-o custom»> </ i> | |
| <i class = «fa fa-file-pdf-o custom»> </ i> | |
| <i class = «fa fa-file-photo-o custom»> </ i> | |
| <i class = «fa fa-file-picture-o custom»> </ i> | |
| <i class = «fa fa-file-powerpoint-o custom»> </ i> | |
| <i class = «fa fa-file-video-o custom»> </ i> | |
| <i class = «fa fa-file-word-o custom»> </ i> | |
| <i class = «fa fa-file-zip-o custom»> </ i> | |
| <i class = «fa fa-file-sound-o custom»> </ i> | |
| <i class = «fa fa-file-text custom»> </ i> | |
| <i class = «fa fa-file-text-o custom»> </ i> |
Font Awesome — Spinner Icons
В этой главе объясняется использование значков Font Awesome Spinner. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Spinner. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-circle-o-notch custom»> </ i> | |
| <i class = «fa fa-cog custom»> </ i> | |
| <i class = «fa fa-gear custom»> </ i> | |
| <i class = «fa fa-refresh custom»> </ i> | |
| <i class = «fa fa-spinner custom»> </ i> |
Font Awesome — значки управления формой
В этой главе объясняется использование значков Font Awesome Form Control. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Form Control. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-check-square custom»> </ i> | |
| <i class = «fa fa-check-square-o custom»> </ i> | |
| <i class = «fa fa-circle custom»> </ i> | |
| <i class = «fa fa-circle-o custom»> </ i> | |
| <i class = «fa fa-dot-circle-o custom»> </ i> | |
| <i class = «fa fa-minus-square custom»> </ i> | |
| <i class = «fa fa-minus-square-o custom»> </ i> | |
| <i class = «fa fa-plus-square custom»> </ i> | |
| <i class = «fa fa-plus-square-o custom»> </ i> | |
| <i class = «fa fa-square custom»> </ i> | |
| <i class = «fa fa-square-o custom»> </ i> | |
Font Awesome — иконки платежей
В этой главе объясняется использование значков Font Awesome Payment. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Payment. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-cc-amex custom»> </ i> | |
| <i class = «fa fa-cc-diners-club custom»> </ i> | |
| <i class = «fa fa-cc-Discover custom»> </ i> | |
| <i class = «fa fa-cc-jcb custom»> </ i> | |
| <i class = «fa fa-cc-mastercard custom»> </ i> | |
| <i class = «fa fa-cc-paypal custom»> </ i> | |
| <i class = «fa fa-cc-stripe custom»> </ i> | |
| <i class = «fa fa-cc-visa custom»> </ i> | |
| <i class = «fa fa-credit-card custom»> </ i> |
Font Awesome — Chart Icons
В этой главе объясняется использование значков Font Awesome Chart. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Chart. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-area-chart custom»> </ i> | |
| <i class = «fa fa-bar-chart custom»> </ i> | |
| <i class = «fa fa-bar-chart-o custom»> </ i> | |
| <i class = «fa fa-line-chart custom»> </ i> | |
| <i class = «fa fa-pie-chart custom»> </ i> |
Font Awesome — Иконки валют
В этой главе объясняется использование значков Font Awesome Currency. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Currency. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-bitcoin custom»> </ i> | |
| <i class = «fa fa-btc custom»> </ i> | |
| <i class = «fa fa-cny custom»> </ i> | |
| <i class = «fa fa-dollar custom»> </ i> | |
| <i class = «fa faur eur custom»> </ i> | |
| <i class = «fa fa-euro custom»> </ i> | |
| <i class = «fa fa-gbp custom»> </ i> | |
| <i class = «fa fa-gg custom»> </ i> | |
| <i class = «fa fa-gg-circle custom»> </ i> | |
| <i class = «fa fa ils custom»> </ i> | |
| <i class = «fa fa-inr custom»> </ i> | |
| <i class = «fa fa-jpy custom»> </ i> | |
| <i class = «fa fa-krw custom»> </ i> | |
| <i class = «fa fa-money custom»> </ i> | |
| <i class = «fa fa-rmb custom»> </ i> | |
| <i class = «fa fa-ruble custom»> </ i> | |
| <i class = «fa fa-rub custom»> </ i> | |
| <i class = «fa fa-ruble custom»> </ i> | |
| <i class = «fa fa-rupee custom»> </ i> | |
| <i class = «fa fa-shekel custom»> </ I> | |
| <i class = «fa fa-sheqel custom»> </ i> | |
| <i class = «fa fa-try custom»> </ i> | |
| <i class = «fa fa-turkish-lira custom»> </ i> | |
| <i class = «fa fa-usd custom»> </ i> | |
| <i class = «fa fa-won custom»> </ i> | |
| <i class = «fa fa-yen custom»> </ i> |
Font Awesome — Значки текстового редактора
В этой главе объясняется использование значков Font Awesome Text Editor. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Text Editor. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-align-center custom»> </ i> | |
| <i class = «fa fa-align-justify custom»> </ i> | |
| <i class = «fa fa-align-left custom»> </ i> | |
| <i class = «fa fa-align-right custom»> </ i> | |
| <i class = «fa fa-bold custom»> </ i> | |
| <i class = «fa fa-chain custom»> </ i> | |
| <i class = «fa fa-chain-broken-custom»> </ i> | |
| <i class = «fa fa-clipboard custom»> </ i> | |
| <i class = «fa fa-columns custom»> </ i> | |
| <i class = «fa fa-copy custom»> </ i> | |
| <i class = «fa fa-cut custom»> </ i> | |
| <i class = «fa fa-dedent custom»> </ i> | |
| <i class = «fa fa-eraser custom»> </ i> | |
| <i class = «fa fa-file custom»> </ i> | |
| <i class = «fa fa-file-o custom»> </ i> | |
| <i class = «fa fa-file-text custom»> </ i> | |
| <i class = «fa fa-file-text-o custom»> </ i> | |
| <i class = «fa fa-files-o custom»> </ i> | |
| <i class = «fa fa-floppy-o custom»> </ i> | |
| <i class = «fa fa-font custom»> </ i> | |
| <i class = «fa fa-header custom»> </ i> | |
| <i class = «fa fa-indent custom»> </ i> | |
| <i class = «fa fa-italic custom»> </ i> | |
| <i class = «fa fa-link custom»> </ i> | |
| <i class = «fa fa-list custom»> </ i> | |
| <i class = «fa fa-list-alt custom»> </ i> | |
| <i class = «fa fa-list-ol custom»> </ i> | |
| <i class = «fa fa-list-ul custom»> </ i> | |
| <i class = «fa fa-outdent custom»> </ i> | |
| <i class = «fa fa-paperclip custom»> </ i> | |
| <i class = «fa fa-абзац пользовательский»> </ i> | |
| <i class = «fa fa-paste custom»> </ i> | |
| <i class = «fa fa-repeat custom»> </ i> | |
| <i class = «fa fa-rotate-left custom»> </ i> | |
| <i class = «fa fa-rotate-right custom»> </ i> | |
| <i class = «fa fa-save custom»> </ i> | |
| <i class = «fa fa-scissors custom»> </ I> | |
| <i class = «fa fa-thrathhrough custom»> </ i> | |
| <i class = «fa fa-subscript custom»> </ i> | |
| <i class = «fa fa-table custom»> </ i> | |
| <i class = «fa fa-text-heigh custom»> </ i> | |
| <i class = «fa fa-text-width custom»> </ i> | |
| <i class = «fa fa-th custom»> </ i> | |
| <i class = «fa fa-th-large custom»> </ i> | |
| <i class = «fa fa-th-list custom»> </ i> | |
| <i class = «fa fa-underline custom»> </ i> | |
| <i class = «fa fa-undo custom»> </ i> | |
| <i class = «fa fa-unlink custom»> </ i> |
Font Awesome — Направленные иконки
В этой главе описывается использование значков Font Awesome Directional. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Directional. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «fa fa-angle-double-down custom»> </ i> | |
| <i class = «fa fa-angle-double-left custom»> </ i> | |
| <i class = «fa fa-angle-double-right custom»> </ i> | |
| <i class = «fa fa-angle-double-up custom»> </ i> | |
| <i class = «fa fa-angle-down custom»> </ i> | |
| <i class = «fa fa-angle-left custom»> </ i> | |
| <i class = «fa fa-angle-right custom»> </ i> | |
| <i class = «fa fa-angle-up custom»> </ i> | |
| <i class = «fa fa-arrow-circle-down custom»> </ i> | |
| <i class = «fa fa-arrow-circle-left custom»> </ i> | |
| <i class = «fa fa-arrow-circle-right custom»> </ i> | |
| <i class = «fa fa-arrow-circle-up custom»> </ i> | |
| <i class = «fa fa-arrow-circle-o-down custom»> </ i> | |
| <i class = «fa fa-arrow-circle-o-left custom»> </ i> | |
| <i class = «fa fa-arrow-circle-o-right custom»> </ i> | |
| <i class = «fa fa-arrow-circle-o-up custom»> </ i> | |
| <i class = «fa fa-arrow-down custom»> </ i> | |
| <i class = «fa fa-arrow-left custom»> </ i> | |
| <i class = «fa fa-arrow-right custom»> </ i> | |
| <i class = «fa fa-arrow-up custom»> </ i> | |
| <i class = «fa fa-arrow custom»> </ i> | |
| <i class = «fa fa-arrow-alt custom»> </ i> | |
| <i class = «fa fa-arrow-h custom»> </ i> | |
| <i class = «fa fa-arrow-v custom»> </ i> | |
| <i class = «fa fa-caret-down custom»> </ i> | |
| <i class = «fa fa-caret-left custom»> </ i> | |
| <i class = «fa fa-caret-right custom»> </ i> | |
| <i class = «fa fa-caret-up custom»> </ i> | |
| <i class = «fa fa-caret-square-o-down custom»> </ i> | |
| <i class = «fa fa-caret-square-o-left custom»> </ i> | |
| <i class = «fa fa-caret-square-o-right custom»> </ i> | |
| <i class = «fa fa-caret-square-o-up custom»> </ i> | |
| <i class = «fa fa-chevron-circle-down custom»> </ i> | |
| <i class = «fa fa-chevron-circle-left custom»> </ i> | |
| <i class = «fa fa-chevron-circle-right custom»> </ i> | |
| <i class = «fa fa-chevron-circle-up custom»> </ i> | |
| <i class = «fa fa-chevron-down custom»> </ i> | |
| <i class = «fa fa-chevron-left custom»> </ i> | |
| <i class = «fa fa-chevron-right custom»> </ i> | |
| <i class = «fa fa-chevron-up custom»> </ i> | |
| <i class = «fa fa-hand-o-down custom»> </ i> | |
| <i class = «fa fa-hand-o-left custom»> </ i> | |
| <i class = «fa fa-hand-o-right custom»> </ i> | |
| <i class = «fa fa-hand-o-up custom»> </ i> | |
| <i class = «fa fa-long-arrow-down custom»> </ i> | |
| <i class = «fa fa-long-arrow-left custom»> </ i> | |
| <i class = «fa fa-long-arrow-right custom»> </ i> | |
| <i class = «fa fa-long-arrow-up custom»> </ i> | |
| <i class = «fa fa-to-down custom»> </ i> | |
| <i class = «fa fa-toggle-left custom»> </ i> | |
| <i class = «fa fa-toggle-right custom»> </ i> | |
| <i class = «fa fa-to-up-custom»> </ i> | |
| <i class = «fa fa-exchange custom»> </ i> |
Font Awesome — Иконки для видеоплеера
В этой главе описывается использование значков Font Awesome Video Player. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Video Player. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Иконки |
|---|---|
| <i class = «fa fa-arrow-alt custom»> </ i> | |
| <i class = «fa fa-backward custom»> </ i> | |
| <i class = «fa fa-compress custom»> </ i> | |
| <i class = «fa fa-eject custom»> </ i> | |
| <i class = «fa fa-expand custom»> </ i> | |
| <i class = «fa fa-fast-backward custom»> </ i> | |
| <i class = «fa fa-fast-forward custom»> </ i> | |
| <i class = «fa fa-forward custom»> </ i> | |
| <i class = «fa fa-play-circle custom»> </ i> | |
| <i class = «fa fa-play-circle-o custom»> </ i> | |
| <i class = «fa fa-random custom»> </ i> | |
| <i class = «fa fa-step-backward custom»> </ i> | |
| <i class = «fa fa-stop custom»> </ i> | |
| <i class = «fa fa-pause custom»> </ i> | |
| <i class = «fa fa-play custom»> </ i> | |
| <i class = «fa fa-youtube-play custom»> </ i> |
Font Awesome — Фирменные иконки
В этой главе описывается использование значков Font Awesome Brand. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Brand. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Иконки |
|---|---|
| <i class = «fa fa-500px custom»> </ i> | |
| <i class = «fa fa-amazon custom»> </ I> | |
| <i class = «fa fa-android custom»> </ i> | |
| <i class = «fa fa-angellist custom»> </ i> | |
| <i class = «fa fa-adn custom»> </ i> | |
| <i class = «fa fa-apple custom»> </ i> | |
| <i class = «fa fa-behance custom»> </ i> | |
| <i class = «fa fa-behance-square custom»> </ I> | |
| <i class = «fa fa-bitbucket custom»> </ i> | |
| <i class = «fa fa-bitbucket-square custom»> </ i> | |
| <i class = «fa fa-btc custom»> </ i> | |
| <i class = «fa fa-black-tie custom»> </ i> | |
| <i class = «fa fa-btc custom»> </ i> | |
| <i class = «fa fa-buysellads custom»> </ i> | |
| <i class = «fa fa-cc-amex custom»> </ i> | |
| <i class = «fa fa-cc-diners-club custom»> </ i> | |
| <i class = «fa fa-cc-Discover custom»> </ i> | |
| <i class = «fa fa-cc-jcb custom»> </ i> | |
| <i class = «fa fa-cc-mastercard custom»> </ i> | |
| <i class = «fa fa-cc-paypal custom»> </ i> | |
| <i class = «fa fa-cc-stripe custom»> </ i> | |
| <i class = «fa fa-cc-visa custom»> </ i> | |
| <i class = «fa fa-chrome custom»> </ i> | |
| <i class = «fa fa-codepen custom»> </ i> | |
| <i class = «fa fa-connectdevelop custom»> </ i> | |
| <i class = «fa fa-contao custom»> </ i> | |
| <i class = «fa fa-css3 custom»> </ i> | |
| <i class = «fa fa-dashcube custom»> </ i> | |
| <Я класс = «fa fa-восхитительный обычай»> </ I> | |
| <i class = «fa fa-deviantart custom»> </ i> | |
| <i class = «fa fa-digg custom»> </ i> | |
| <i class = «fa fa-dribbble custom»> </ i> | |
| <i class = «fa fa-dropbox custom»> </ i> | |
| <i class = «fa fa-drupal custom»> </ i> | |
| <i class = «fa fa-empire custom»> </ i> | |
| <i class = «fa fa-expeditedssl custom»> </ i> | |
| <i class = «fa fa-facebook custom»> </ i> | |
| <i class = «fa fa-facebook-f custom»> </ i> | |
| <i class = «fa fa-facebook-official custom»> </ i> | |
| <i class = «fa fa-facebook-square custom»> </ i> | |
| <i class = «fa fa-firefox custom»> </ i> | |
| <i class = «fa fa-flickr custom»> </ i> | |
| <i class = «fa fa-fonticons custom»> </ i> | |
| <i class = «fa fa-forumbee custom»> </ i> | |
| <i class = «fa fa-foursquare custom»> </ i> | |
| <i class = «fa fa-ge custom»> </ i> | |
| <i class = «fa fa-get-pocket custom»> </ i> | |
| <i class = «fa fa-gg custom»> </ i> | |
| <i class = «fa fa-gg-circle custom»> </ i> | |
| <i class = «fa fa-git custom»> </ i> | |
| <i class = «fa fa-git-square custom»> </ i> | |
| <i class = «fa fa-github custom»> </ i> | |
| <i class = «fa fa-github-alt custom»> </ i> | |
| <i class = «fa fa-github-square custom»> </ i> | |
| <i class = «fa fa-gratipay custom»> </ i> | |
| <i class = «fa fa-google custom»> </ i> | |
| <i class = «fa fa-google-plus custom»> </ i> | |
| <i class = «fa fa-google-plus-square custom»> </ i> | |
| <i class = «fa fa-youtube-play custom»> </ i> | |
| <i class = «fa fa-gratipay custom»> </ i> | |
| <i class = «fa fa-hacker-news custom»> </ i> | |
| <i class = «fa fa-houzz custom»> </ i> | |
| <i class = «fa fa-html5 custom»> </ i> | |
| <i class = «fa fa-instagram custom»> </ i> | |
| <i class = «fa fa-internet-explorer custom»> </ i> | |
| <i class = «fa fa-ioxhost custom»> </ i> | |
| <i class = «fa fa-joomla custom»> </ i> | |
| <i class = «fa fa-jsfiddle custom»> </ i> | |
| <i class = «fa fa-lastfm custom»> </ i> | |
| <i class = «fa fa-lastfm-square custom»> </ i> | |
| <i class = «fa fa-leanpub custom»> </ i> | |
| <i class = «fa fa-linkedin custom»> </ i> | |
| <i class = «fa fa-linkedin-square custom»> </ i> | |
| <i class = «fa fa-linux custom»> </ i> | |
| <i class = «fa fa-maxcdn custom»> </ i> | |
| <i class = «fa fa-meanpath custom»> </ i> | |
| <i class = «fa fa-medium custom»> </ i> | |
| <i class = «fa fa-odnoklassniki custom»> </ i> | |
| <i class = «fa fa-odnoklassniki-square custom»> </ i> | |
| <i class = «fa fa-opencart custom»> </ i> | |
| <i class = «fa fa-opera custom»> </ i> | |
| <i class = «fa fa-optin-monster custom»> </ i> | |
| <i class = «fa fa-openid custom»> </ i> | |
| <i class = «fa fa-pagelines custom»> </ i> | |
| <i class = «fa fa-youtube custom»> </ i> | |
| <i class = «fa fa-pied-piper custom»> </ i> | |
| <i class = «fa fa-pied-piper-alt custom»> </ i> | |
| <i class = «fa fa-pinterest custom»> </ i> | |
| <i class = «fa fa-pinterest-p custom»> </ i> | |
| <i class = «fa fa-pinterest-square custom»> </ I> | |
| <i class = «fa fa-qq custom»> </ i> | |
| <i class = «fa fa-ra custom»> </ i> | |
| <i class = «fa fa-rebel custom»> </ i> | |
| <i class = «fa fa-reddit custom»> </ i> | |
| <i class = «fa fa-renren custom»> </ i> | |
| <i class = «fa fa-amazon custom»> </ I> | |
| <i class = «fa fa-safari custom»> </ i> | |
| <i class = «fa fa-sellsy custom»> </ i> | |
| <i class = «fa fa-youtube-square custom»> </ i> | |
| <i class = «fa fa-share-alt custom»> </ i> | |
| <i class = «fa fa-share-alt-square custom»> </ i> | |
| <i class = «fa fa-shirtsinbulk custom»> </ I> | |
| <i class = «fa fa-simplybuilt custom»> </ i> | |
| <i class = «fa fa-skyatlas custom»> </ i> | |
| <i class = «fa fa-skype custom»> </ i> | |
| <i class = «fa fa-slack custom»> </ i> | |
| <i class = «fa fa-yc-square custom»> </ i> | |
| <i class = «fa fa-soundcloud custom»> </ i> | |
| <i class = «fa fa-spotify custom»> </ i> | |
| <i class = «fa fa-stack-exchange custom»> </ i> | |
| <i class = «fa fa-stack-overflow custom»> </ i> | |
| <i class = «fa fa-steam custom»> </ i> | |
| <i class = «fa fa-steam-square custom»> </ i> | |
| <i class = «fa fa-stumbleupon custom»> </ i> | |
| <i class = «fa fa-stumbleupon-circle custom»> </ i> | |
| <i class = «fa fa-tencent-weibo custom»> </ i> | |
| <i class = «fa fa-trello custom»> </ i> | |
| <i class = «fa fa-tripadvisor custom»> </ i> | |
| <i class = «fa fa-tumblr custom»> </ i> | |
| <i class = «fa fa-tumblr-square custom»> </ i> | |
| <i class = «fa fa-yahoo custom»> </ i> | |
| <i class = «fa fa-twitter custom»> </ i> | |
| <i class = «fa fa-twitter-square custom»> </ i> | |
| <i class = «fa fa-viacoin custom»> </ i> | |
| <i class = «fa fa-vimeo custom»> </ i> | |
| <i class = «fa fa-vimeo-square custom»> </ i> | |
| <i class = «fa fa-vine custom»> </ i> | |
| <i class = «fa fa-vk custom»> </ i> | |
| <i class = «fa fa-wechat custom»> </ i> | |
| <i class = «fa fa-weibo custom»> </ i> | |
| <i class = «fa fa-weixin custom»> </ i> | |
| <i class = «fa fa-whatsapp custom»> </ i> | |
| <i class = «fa fa-wikipedia-w custom»> </ i> | |
| <i class = «fa fa-windows custom»> </ i> | |
| <i class = «fa fa-wordpress custom»> </ i> | |
| <i class = «fa fa-xing custom»> </ i> | |
| <i class = «fa fa-xing-square custom»> </ i> | |
| <i class = «fa fa-y-combinator custom»> </ i> | |
| <i class = «fa fa-y-combinator-square custom»> </ i> | |
| <i class = «fa fa-yc custom»> </ i> |
Font Awesome — Медицинские иконки
В этой главе описывается использование значков Font Awesome Medical. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
В следующей таблице показано использование и результаты значков Font Awesome Medical. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Значок |
|---|---|
| <i class = «fa fa-ambulance custom»> </ i> | |
| <i class = «fa fa-h-square custom»> </ i> | |
| <i class = «fa fa-heart custom»> </ i> | |
| <i class = «fa fa-heart-o custom»> </ i> | |
| <i class = «fa fa-heartbeat custom»> </ i> | |
| <i class = «fa fa-hospital-o custom»> </ i> | |
| <i class = «fa fa-medkit custom»> </ i> | |
| <i class = «fa fa-plus-square custom»> </ i> | |
| <i class = «fa fa-stethoscope custom»> </ i> | |
| <i class = «fa fa-user-md custom»> </ i> | |
| <i class = «fa fa-инвалидных колясок обычай»> </ I> |
Значки материалов
Google предоставляет набор из 750 значков, разработанных в соответствии с «рекомендациями по дизайну материалов», которые называются значками « Дизайн материалов» . Эти значки просты и поддерживают все современные веб-браузеры. Поскольку эти значки являются векторными, они также масштабируемы. Чтобы использовать эти иконки, мы должны загрузить шрифт (библиотеку) материала-иконки .
Загрузка шрифта (библиотека)
Чтобы загрузить библиотеку значков материалов, скопируйте и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet"> </head>
Использование иконки
Значки материалов Google содержат длинный список значков. Выберите любой из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали значок с именем accessibility, который принадлежит категории действия.
<!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.
<!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, чтобы определить цвет иконки. В следующем примере показано, как можно изменить цвет значка, называемого специальным доступом .
<!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 иконки
- Иконки общения
- Значки содержимого
- Значки устройств
- Значки редактора
- Иконки файлов
- Аппаратные иконки
- Иконки изображений
- Карты Иконки
- Иконки навигации
- Значки уведомлений
- Социальные иконки
- Значки переключения
Чтобы использовать любой из этих значков, вы должны заменить имя класса в программах, приведенных в этой главе, на имя класса нужного значка. В следующих главах этого раздела (значки материалов) мы объяснили по категориям использование и соответствующие результаты различных значков материалов.
Материал — Иконки действий
В этой главе объясняется использование значков действий Google (Материал). Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков действий Google (Материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> 3d_rotation </ i> | 3d_rotation |
| <i class = «custom-icons custom»> специальные возможности </ i> | доступность |
| <i class = «custom-icons custom»> account_balance </ i> | баланс |
| <i class = «custom-icons custom»> account_balance_wallet </ i> | account_balance_wallet |
| <i class = «custom-icons custom»> account_box </ i> | account_box |
| <i class = «custom-icons custom»> account_circle </ i> | account_circle |
| <i class = «custom-icons custom»> add_shopping_cart </ i> | add_shopping_cart |
| <i class = «custom-icons custom»> будильник </ i> | тревога |
| <i class = «custom-icons custom»> alarm_add </ i> | alarm_add |
| <i class = «custom-icons custom»> alarm_off </ i> | alarm_off |
| <i class = «custom-icons custom»> alarm_on </ i> | alarm_on |
| <i class = «Material-Icons Custom»> Android </ I> | андроид |
| <i class = «custom-icons custom»> объявление </ i> | объявление |
| <i class = «custom-icons custom»> aspect_ratio </ i> | соотношение сторон |
| <i class = «custom-icons custom»> оценка </ i> | оценка |
| <i class = «custom-icons custom»> назначение </ i> | назначение |
| <i class = «custom-icons custom»> assignment_ind </ i> | assignment_ind |
| <i class = «custom-icons custom»> assignment_late </ i> | assignment_late |
| <i class = «custom-icons custom»> assignment_return </ i> | assignment_return |
| <i class = «custom-icons custom»> assignment_returned </ i> | assignment_returned |
| <i class = «custom-icons custom»> assignment_turned_in </ i> | assignment_turned_in |
| <i class = «material-icons custom»> автообновление </ i> | авто-обновление |
| <i class = «custom-icons custom»> резервное копирование </ i> | резервное копирование |
| <i class = «custom-icons custom»> книга </ i> | книга |
| <i class = «custom-icons custom»> закладка </ i> | закладка |
| <i class = «custom-icons custom»> bookmark_border </ i> | bookmark_border |
| <i class = «custom-icons custom»> bug_report </ i> | сообщение об ошибке |
| <i class = «custom-icons custom»> build </ i> | строить |
| <i class = «material-icons custom»> кэшируется </ i> | кэшируются |
| <i class = «custom-icons custom»> camera_enhance </ i> | camera_enhance |
| <i class = «custom-icons custom»> card_giftcard </ i> | card_giftcard |
| <i class = «custom-icons custom»> card_membership </ i> | card_membership |
| <i class = «custom-icons custom»> card_travel </ i> | card_travel |
| <i class = «custom-icons custom»> история изменений </ i> | change_history |
| <i class = «custom-icons custom»> check_circle </ i> | check_circle |
| <i class = «custom-icons custom»> chrome_reader_mode </ i> | chrome_reader_mode |
| <i class = «custom-icons custom»> class </ i> | учебный класс |
| <i class = «custom-icons custom»> code </ i> | код |
| <i class = «custom-icons custom»> кредитная карта </ i> | кредитная карта |
| <i class = «custom-icons custom»> панель инструментов </ i> | приборная доска |
| <i class = «custom-icons custom»> delete </ i> | удалять |
| <i class = «custom-icons custom»> описание </ i> | описание |
| <i class = «custom-icons custom»> dns </ i> | DNS |
| <i class = «custom-icons custom»> готово </ i> | сделанный |
| <i class = «custom-icons custom»> done_all </ i> | done_all |
| <i class = «material-icons custom»> извлечь </ i> | выталкивать |
| <i class = «custom-icons custom»> событие </ i> | событие |
| <i class = «custom-icons custom»> event_seat </ i> | event_seat |
| <i class = «custom-icons custom»> exit_to_app </ i> | exit_to_app |
| <i class = «custom-icons custom»> исследовать </ i> | проводить исследования |
| <i class = «material-icons custom»> расширение </ i> | расширение |
| <i class = «custom-icons custom»> face </ i> | лицо |
| <i class = «custom-icons custom»> избранное </ i> | любимый |
| <i class = «custom-icons custom»> favour_border </ i> | favorite_border |
| <i class = «custom-icons custom»> обратная связь </ i> | Обратная связь |
| <i class = «custom-icons custom»> find_in_page </ i> | find_in_page |
| <i class = «custom-icons custom»> find_replace </ i> | find_replace |
| <i class = «custom-icons custom»> flight_land </ i> | flight_land |
| <i class = «custom-icons custom»> flight_takeoff </ i> | flight_takeoff |
| <i class = «custom-icons custom»> flip_to_back </ i> | flip_to_back |
| <i class = «custom-icons custom»> flip_to_front </ i> | flip_to_front |
| <i class = «custom-icons custom»> get_app </ i> | скачать приложение |
| <i class = «custom-icons custom»> gif </ i> | GIF |
| <i class = «custom-icons custom»> оценка </ i> | класс |
| <i class = «custom-icons custom»> group_work </ i> | групповая работа |
| <i class = «custom-icons custom»> справка </ i> | Помогите |
| <i class = «custom-icons custom»> help_outline </ i> | help_outline |
| <i class = «custom-icons custom»> highlight_off </ i> | highlight_off |
| <i class = «custom-icons custom»> история </ i> | история |
| <i class = «custom-icons custom»> home </ i> | Главная |
| <i class = «custom-icons custom»> hourglass_empty </ i> | hourglass_empty |
| <i class = «custom-icons custom»> hourglass_full </ i> | hourglass_full |
| <i class = «custom-icons custom»> http </ i> | HTTP |
| <i class = «custom-icons custom»> https </ i> | HTTPS |
| <i class = «custom-icons custom»> информация </ i> | Информация |
| <i class = «custom-icons custom»> info_outline </ i> | info_outline |
| <i class = «custom-icons custom»> ввод </ i> | вход |
| <i class = «custom-icons custom»> invert_colors </ i> | invert_colors |
| <i class = «custom-icons custom»> label </ i> | этикетка |
| <i class = «custom-icons custom»> label_outline </ i> | label_outline |
| <i class = «custom-icons custom»> язык </ i> | язык |
| <i class = «custom-icons custom»> запуск </ i> | запуск |
| <i class = «custom-icons custom»> список </ i> | список |
| <i class = «custom-icons custom»> блокировка </ i> | замок |
| <i class = «custom-icons custom»> lock_open </ i> | lock_open |
| <i class = «custom-icons custom»> lock_outline </ i> | lock_outline |
| <i class = «material-icons custom»> лояльность </ i> | лояльность |
| <i class = «custom-icons custom»> markunread_mailbox </ i> | markunread_mailbox |
| <i class = «custom-icons custom»> note_add </ i> | note_add |
| <i class = «custom-icons custom»> offline_pin </ i> | offline_pin |
| <i class = «custom-icons custom»> open_in_browser </ i> | открыть в браузере |
| <i class = «custom-icons custom»> open_in_new </ i> | open_in_new |
| <i class = «custom-icons custom»> open_with </ i> | открыть с |
| <i class = «custom-icons custom»> просмотр страницы </ i> | Вид страницы |
| <i class = «custom-icons custom»> оплата </ i> | оплата |
| <i class = «custom-icons custom»> perm_camera_mic </ i> | perm_camera_mic |
| <i class = «custom-icons custom»> perm_contact_cale </ i> | perm_contact_cale |
| <i class = «custom-icons custom»> perm_data_settings </ i> | perm_data_settings |
| <i class = «custom-icons custom»> perm_device_information </ i> | perm_device_information |
| <i class = «custom-icons custom»> perm_identity </ i> | perm_identity |
| <i class = «custom-icons custom»> perm_media </ i> | perm_media |
| <i class = «custom-icons custom»> perm_phone_msg </ i> | perm_phone_msg |
| <i class = «custom-icons custom»> perm_scan_wifi </ i> | perm_scan_wifi |
| <i class = «custom-icons custom»> picture_in_picture </ i> | picture_in_picture |
| <i class = «custom-icons custom»> play_for_work </ i> | play_for_work |
| <i class = «material-icons custom»> полимер </ i> | полимер |
| <i class = «custom-icons custom»> power_settings_new </ i> | power_settings_new |
| <i class = «custom-icons custom»> печать </ i> | Распечатать |
| <i class = «custom-icons custom»> query_builder </ i> | query_builder |
| <i class = «custom-icons custom»> question_answer </ i> | вопрос ответ |
| <i class = «custom-icons custom»> квитанция </ i> | чек |
| <i class = «custom-icons custom»> выкупить </ i> | выкупать |
| <i class = «custom-icons custom»> изменить порядок </ i> | Изменение порядка |
| <i class = «custom-icons custom»> report_problem </ i> | Отчет о проблемах |
| <i class = «custom-icons custom»> restore </ i> | восстановить |
| <i class = «custom-icons custom»> комната </ i> | номер |
| <i class = «custom-icons custom»> расписание </ i> | график |
| <i class = «custom-icons custom»> поиск </ i> | поиск |
| <i class = «custom-icons custom»> настройки </ i> | настройки |
| <i class = «custom-icons custom»> settings_applications </ i> | settings_applications |
| <i class = «custom-icons custom»> settings_bluetooth </ i> | settings_bluetooth |
| <i class = «custom-icons custom»> settings_brightness </ i> | settings_brightness |
| <i class = «custom-icons custom»> settings_cell </ i> | settings_cell |
| <i class = «custom-icons custom»> settings_ethernet </ i> | settings_ethernet |
| <i class = «custom-icons custom»> settings_input_antenna </ i> | settings_input_antenna |
| <i class = «custom-icons custom»> settings_input_component </ i> | settings_input_component |
| <i class = «custom-icons custom»> settings_input_hdmi </ i> | settings_input_hdmi |
| <i class = «custom-icons custom»> settings_input_svideo </ i> | settings_input_svideo |
| <i class = «custom-icons custom»> settings_overscan </ i> | settings_overscan |
| <i class = «custom-icons custom»> settings_phone </ i> | settings_phone |
| <i class = «custom-icons custom»> settings_power </ i> | settings_power |
| <i class = «custom-icons custom»> settings_remote </ i> | settings_remote |
| <i class = «custom-icons custom»> settings_voice </ i> | settings_voice |
| <i class = «custom-icons custom»> магазин </ i> | магазин |
| <i class = «custom-icons custom»> shop_two </ i> | shop_two |
| <i class = «custom-icons custom»> корзина для покупок </ i> | корзина |
| <i class = «custom-icons custom»> корзина для покупок </ i> | корзина |
| <i class = «custom-icons custom»> speaker_notes </ i> | speaker_notes |
| <i class = «material-icons custom»> проверка орфографии </ i> | проверка орфографии |
| <i class = «custom-icons custom»> star_rate </ i> | star_rate |
| <i class = «custom-icons custom»> звезды </ i> | звезды |
| <i class = «custom-icons custom»> магазин </ i> | хранить |
| <i class = «custom-icons custom»> тема </ i> | предмет |
| <i class = «custom-icons custom»> supervisor_account </ i> | supervisor_account |
| <i class = «custom-icons custom»> swap_horiz </ i> | swap_horiz |
| <i class = «custom-icons custom»> swap_vert </ i> | swap_vert |
| <i class = «custom-icons custom»> swap_vertical_circle </ i> | swap_vertical_circle |
| <i class = «custom-icons custom»> system_update_alt </ i> | system_update_alt |
| <i class = «custom-icons custom»> вкладка </ i> | табуляция |
| <i class = «custom-icons custom»> tab_unselected </ i> | tab_unselected |
| <i class = «material-icons custom»> театры </ i> | театры |
| <i class = «custom-icons custom»> thumb_down </ i> | thumb_down |
| <i class = «custom-icons custom»> thumb_up </ i> | палец вверх |
| <i class = «custom-icons custom»> thumbs_up_down </ i> | thumbs_up_down |
| <i class = «custom-icons custom»> toc </ i> | TOC |
| <i class = «material-icons custom»> сегодня </ i> | сегодня |
| <i class = «custom-icons custom»> пошлина </ i> | Потери |
| <i class = «custom-icons custom»> track_changes </ i> | отслеживать изменения |
| <i class = «material-icons custom»> перевод </ i> | переведите |
| <i class = «custom-icons custom»> trending_down </ i> | trending_down |
| <i class = «custom-icons custom»> trending_flat </ i> | trending_flat |
| <i class = «custom-icons custom»> trending_up </ i> | trending_up |
| <i class = «custom-icons custom»> turn_in </ i> | turned_in |
| <i class = «custom-icons custom»> verify_user </ i> | verified_user |
| <i class = «custom-icons custom»> view_agenda </ i> | view_agenda |
| <i class = «custom-icons custom»> view_array </ i> | view_array |
| <i class = «custom-icons custom»> view_carousel </ i> | view_carousel |
| <i class = «custom-icons custom»> view_column </ i> | view_column |
| <i class = «custom-icons custom»> view_day </ i> | view_day |
| <i class = «custom-icons custom»> view_headline </ i> | view_headline |
| <i class = «custom-icons custom»> view_list </ i> | view_list |
| <i class = «custom-icons custom»> view_module </ i> | view_module |
| <i class = «custom-icons custom»> view_quilt </ i> | view_quilt |
| <i class = «custom-icons custom»> view_stream </ i> | view_stream |
| <i class = «custom-icons custom»> view_week </ i> | view_week |
| <i class = «custom-icons custom»> видимость </ i> | видимость |
| <i class = «custom-icons custom»> visibility_off </ i> | visibility_off |
| <i class = «custom-icons custom»> работа </ i> | Работа |
| <i class = «custom-icons custom»> youtube_searched_for </ i> | youtube_searched_for |
| <i class = «custom-icons custom»> zoom_in </ i> | приблизить |
| <i class = «custom-icons custom»> zoom_out </ i> | уменьшить |
Материал — значки оповещений
В этой главе объясняется использование значков оповещений Google (Material). Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены результаты использования значков оповещений Google (материал) и их результаты. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> add_alert </ i> | add_alert |
| <i class = «custom-icons custom»> ошибка </ i> | ошибка |
| <i class = «custom-icons custom»> error_outline </ i> | error_outline |
| <i class = «custom-icons custom»> предупреждение </ i> | предупреждение |
Материал — AV Иконки
В этой главе описывается использование значков Google (Материал) AV. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
Следующая таблица содержит информацию об использовании и результатах использования значков Google (Материал) AV. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «material-icons custom»> трансляция </ i> | трансляция звукозаписи |
| <i class = «custom-icons custom»> альбом </ i> | альбом |
| <i class = «custom-icons custom»> av_timer </ i> | av_timer |
| <i class = «custom-icons custom»> closed_caption </ i> | closed_caption |
| <i class = «material-icons custom»> эквалайзер </ i> | эквалайзер |
| <i class = «custom-icons custom»> явный </ i> | явный |
| <i class = «custom-icons custom»> fast_forward </ i> | перемотка вперед |
| <i class = «custom-icons custom»> fast_rewind </ i> | fast_rewind |
| <i class = «custom-icons custom»> forward_10 </ i> | forward_10 |
| <i class = «custom-icons custom»> forward_30 </ i> | forward_30 |
| <i class = «custom-icons custom»> forward_5 </ i> | forward_5 |
| <i class = «custom-icons custom»> игры </ i> | игры |
| <i class = «custom-icons custom»> hd </ i> | HD |
| <i class = «material-icons custom»> слух </ i> | слух |
| <i class = «custom-icons custom»> высокое качество </ i> | высокое качество |
| <i class = «custom-icons custom»> library_add </ i> | library_add |
| <i class = «custom-icons custom»> library_books </ i> | library_books |
| <i class = «custom-icons custom»> library_music </ i> | library_music |
| <i class = «custom-icons custom»> цикл </ i> | петля |
| <i class = «custom-icons custom»> mic </ i> | микрофон |
| <i class = «custom-icons custom»> mic_none </ i> | mic_none |
| <i class = «custom-icons custom»> mic_off </ i> | mic_off |
| <i class = «custom-icons custom»> фильм </ i> | кино |
| <i class = «custom-icons custom»> pause_circle_outline </ i> | pause_circle_outline |
| <i class = «custom-icons custom»> new_releases </ i> | новые релизы |
| <i class = «custom-icons custom»> not_interested </ i> | не интересно |
| <i class = «custom-icons custom»> пауза </ i> | Пауза |
| <i class = «custom-icons custom»> pause_circle_filled </ i> | pause_circle_filled |
| <i class = «custom-icons custom»> play_arrow </ i> | play_arrow |
| <i class = «custom-icons custom»> play_circle_filled </ i> | play_circle_filled |
| <i class = «custom-icons custom»> play_circle_outline </ i> | play_circle_outline |
| <i class = «custom-icons custom»> playlist_add </ i> | playlist_add |
| <i class = «custom-icons custom»> очередь </ i> | очередь |
| <i class = «custom-icons custom»> queue_music </ i> | queue_music |
| <i class = «custom-icons custom»> радио </ i> | радио |
| <i class = «custom-icons custom»> недавние_акторы </ i> | recent_actors |
| <i class = «custom-icons custom»> repeat </ i> | повторение |
| <i class = «custom-icons custom»> repeat_one </ i> | repeat_one |
| <i class = «custom-icons custom»> воспроизведение </ i> | переигровка |
| <i class = «material-icons custom»> трансляция </ i> | replay_10 |
| <i class = «custom-icons custom»> replay_30 </ i> | replay_30 |
| <i class = «custom-icons custom»> replay_5 </ i> | replay_5 |
| <i class = «material-icons custom»> shuffle </ i> | шарканье |
| <i class = «custom-icons custom»> skip_next </ i> | skip_next |
| <i class = «custom-icons custom»> skip_previous </ i> | skip_previous |
| <i class = «material-icons custom»> отложить </ I> | вздремнуть |
| <i class = «custom-icons custom»> sort_by_alpha </ i> | sort_by_alpha |
| <i class = «custom-icons custom»> stop </ i> | стоп |
| <i class = «material-icons custom»> субтитры </ i> | субтитры |
| <i class = «custom-icons custom» >round_sound </ i> | объемный звук |
| <i class = «custom-icons custom»> video_library </ i> | video_library |
| <i class = «custom-icons custom»> видеокамера </ i> | VideoCAM |
| <i class = «custom-icons custom»> videocam_off </ i> | videocam_off |
| <i class = «custom-icons custom»> volume_down </ i> | убавить звук |
| <i class = «custom-icons custom»> volume_mute </ i> | volume_mute |
| <i class = «custom-icons custom»> volume_off </ i> | volume_off |
| <i class = «custom-icons custom»> volume_up </ i> | увеличить громкость |
| <i class = «custom-icons custom»> web </ i> | Web |
Материал — Иконки общения
В этой главе рассказывается об использовании значков Google (Material) Communication. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах использования значков Google (материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> бизнес </ i> | бизнес |
| <i class = «custom-icons custom»> вызов </ i> | вызов |
| <i class = «custom-icons custom»> call_made </ i> | call_made |
| <i class = «custom-icons custom»> call_merge </ i> | call_merge |
| <i class = «custom-icons custom»> call_missed </ i> | call_missed |
| <i class = «custom-icons custom»> call_received </ i> | call_received |
| <i class = «custom-icons custom»> call_split </ i> | call_split |
| <i class = «custom-icons custom»> чат </ i> | чат |
| <i class = «custom-icons custom»> chat_bubble </ i> | chat_bubble |
| <i class = «custom-icons custom»> chat_bubble_outline </ i> | chat_bubble_outline |
| <i class = «custom-icons custom»> clear_all </ i> | очистить все |
| <i class = «custom-icons custom»> комментарий </ i> | комментарий |
| <i class = «custom-icons custom»> contact_phone </ i> | Контактный телефон |
| <i class = «material-icons custom»> контакты </ i> | контакты |
| <i class = «custom-icons custom»> dialer_sip </ i> | dialer_sip |
| <i class = «custom-icons custom»> панель набора номера </ i> | клавиатура для набора номера |
| <i class = «custom-icons custom»> форум </ i> | Форум |
| <i class = «custom-icons custom»> import_export </ i> | импорт Экспорт |
| <i class = «custom-icons custom»> invert_colors_off </ i> | invert_colors_off |
| <i class = «custom-icons custom»> live_help </ i> | live_help |
| <i class = «custom-icons custom»> location_off </ i> | location_off |
| <i class = «custom-icons custom»> location_on </ i> | Местоположение на |
| <i class = «custom-icons custom»> message </ i> | сообщение |
| <i class = «custom-icons custom»> no_sim </ i> | no_sim |
| <i class = «material-icons custom»> телефон </ i> | Телефон |
| <i class = «custom-icons custom»> phonelink_erase </ i> | phonelink_erase |
| <i class = «custom-icons custom»> phonelink_lock </ i> | phonelink_lock |
| <i class = «custom-icons custom»> phonelink_ring </ i> | phonelink_ring |
| <i class = «custom-icons custom»> phonelink_setup </ i> | phonelink_setup |
| <i class = «custom-icons custom»> portable_wifi_off </ i> | portable_wifi_off |
| <i class = «custom-icons custom»> present_to_all </ i> | present_to_all |
| <i class = «custom-icons custom»> ring_volume </ i> | ring_volume |
| <i class = «custom-icons custom»> speaker_phone </ i> | громкая связь |
| <i class = «custom-icons custom»> stay_current_landscape </ i> | stay_current_landscape |
| <i class = «custom-icons custom»> stay_current_portrait </ i> | stay_current_portrait |
| <i class = «custom-icons custom»> stay_primary_landscape </ i> | stay_primary_landscape |
| <i class = «custom-icons custom»> stay_primary_portrait </ i> | stay_primary_portrait |
| <i class = «custom-icons custom»> swap_calls </ i> | swap_calls |
| <i class = «custom-icons custom»> тексты </ i> | textsms |
| <i class = «custom-icons custom»> голосовая почта </ i> | голосовая почта |
| <i class = «custom-icons custom»> vpn_key </ i> | vpn_key |
| <i class = «custom-icons custom»> электронная почта </ i> | Эл. адрес |
| <i class = «custom-icons custom»> call_end </ i> | call_end |
Материал — Значки контента
В этой главе объясняется использование значков Google (материал) контента. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков Google (Материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> add </ i> | добавлять |
| <i class = «custom-icons custom»> add_box </ i> | add_box |
| <i class = «custom-icons custom»> add_circle </ i> | add_circle |
| <i class = «custom-icons custom»> add_circle_outline </ i> | add_circle_outline |
| <i class = «custom-icons custom»> архив </ i> | архив |
| <i class = «material-icons custom»> backspace </ i> | возврат на одну позицию |
| <i class = «custom-icons custom»> блок </ i> | блок |
| <i class = «custom-icons custom»> clear </ i> | Чисто |
| <i class = «custom-icons custom»> content_copy </ i> | content_copy |
| <i class = «custom-icons custom»> content_cut </ i> | content_cut |
| <i class = «custom-icons custom»> content_paste </ i> | content_paste |
| <i class = «custom-icons custom»> создать </ i> | Создайте |
| <i class = «custom-icons custom»> черновики </ i> | Черновики |
| <i class = «custom-icons custom»> список_фильтров </ i> | filter_list |
| <i class = «custom-icons custom»> flag </ i> | флаг |
| <i class = «custom-icons custom»> font_download </ i> | font_download |
| <i class = «custom-icons custom»> forward </ i> | вперед |
| <i class = «custom-icons custom»> жест </ i> | жест |
| <i class = «custom-icons custom»> входящие </ i> | входящие |
| <i class = «custom-icons custom»> ссылка </ i> | ссылка на сайт |
| <i class = «custom-icons custom»> почта </ i> | почта |
| <i class = «custom-icons custom»> markunread </ i> | пометить как непрочитанное |
| <i class = «custom-icons custom»> повторить </ i> | переделывать |
| <i class = «custom-icons custom»> удалить </ i> | Удалить |
| <i class = «custom-icons custom»> remove_circle </ i> | remove_circle |
| <i class = «custom-icons custom»> remove_circle_outline </ i> | remove_circle_outline |
| <i class = «custom-icons custom»> ответить </ i> | Ответить |
| <i class = «custom-icons custom»> reply_all </ i> | повторить все |
| <i class = «custom-icons custom»> отчет </ i> | доклад |
| <i class = «custom-icons custom»> сохранить </ i> | спасти |
| <i class = «custom-icons custom»> select_all </ i> | выбрать все |
| <i class = «custom-icons custom»> отправить </ i> | Отправить |
| <i class = «custom-icons custom»> sort </ i> | Сортировать |
| <i class = «custom-icons custom»> text_format </ i> | text_format |
| <i class = «custom-icons custom»> stay_current_portrait </ i> | stay_current_portrait |
| <i class = «custom-icons custom»> отменить </ i> | расстегивать |
Материал — значки устройств
В этой главе рассказывается об использовании значков устройств Google (Материал). Предположим, что custom — это имя класса CSS, в котором мы определили размер и цвет, как показано ниже.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены результаты использования значков устройств Google (материал) и их результаты.
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> access_alarm </ i> | access_alarm |
| <i class = «custom-icons custom»> access_alarms </ i> | access_alarms |
| <i class = «custom-icons custom»> access_time </ i> | время доступа |
| <i class = «custom-icons custom»> add_alarm </ i> | add_alarm |
| <i class = «material-icons custom»> aircraftmode_active </ i> | airplanemode_active |
| <i class = «material-icons custom»> aircraftmode_inactive </ i> | airplanemode_inactive |
| <i class = «custom-icons custom»> battery_alert </ i> | battery_alert |
| <i class = «custom-icons custom»> battery_charging_full </ i> | battery_charging_full |
| <i class = «custom-icons custom»> battery_full </ i> | battery_full |
| <i class = «custom-icons custom»> battery_std </ i> | battery_std |
| <i class = «custom-icons custom»> battery_unknown </ i> | battery_unknown |
| <i class = «custom-icons custom»> bluetooth </ i> | блютуз |
| <i class = «material-icons custom»> bluetooth_connected </ i> | bluetooth_connected |
| <i class = «custom-icons custom»> bluetooth_disabled </ i> | bluetooth_disabled |
| <i class = «custom-icons custom»> bluetooth_searching </ i> | bluetooth_searching |
| <i class = «custom-icons custom»> яркость_авто </ i> | brightness_auto |
| <i class = «material-icons custom»> яркость_высок </ i> | brightness_high |
| <i class = «Material-Icons Custom»> Bright_low </ I> | brightness_low |
| <i class = «Material-Icons Custom»> Bright_medium </ I> | brightness_medium |
| <i class = «custom-icons custom»> data_usage </ i> | Использование данных |
| <i class = «custom-icons custom»> developer_mode </ i> | режим разработчика |
| <i class = «custom-icons custom»> устройства </ i> | приборы |
| <i class = «custom-icons custom»> dvr </ i> | Видеорегистратор |
| <i class = «custom-icons custom»> gps_fixed </ i> | gps_fixed |
| <i class = «custom-icons custom»> gps_not_fixed </ i> | gps_not_fixed |
| <i class = «custom-icons custom»> gps_off </ i> | gps_off |
| <i class = «custom-icons custom»> graphic_eq </ i> | graphic_eq |
| <i class = «custom-icons custom»> location_disabled </ i> | location_disabled |
| <i class = «custom-icons custom»> location_searching </ i> | location_searching |
| <i class = «custom-icons custom»> network_cell </ i> | network_cell |
| <i class = «custom-icons custom»> network_wifi </ i> | network_wifi |
| <i class = «custom-icons custom»> screen_lock_landscape </ i> | screen_lock_landscape |
| <i class = «custom-icons custom»> screen_lock_portrait </ i> | screen_lock_portrait |
| <i class = «custom-icons custom»> screen_lock_rotation </ i> | screen_lock_rotation |
| <i class = «custom-icons custom»> screen_rotation </ i> | вращение экрана |
| <i class = «custom-icons custom»> sd_storage </ i> | sd_storage |
| <i class = «custom-icons custom»> settings_system_daydream </ i> | settings_system_daydream |
| <i class = «custom-icons custom»> signal_cellular_4_bar </ i> | signal_cellular_4_bar |
| <i class = «custom-icons custom»> wifi_tethering </ i> | wifi_tethering |
| <i class = «custom-icons custom»> signal_cellular_no_sim </ i> | signal_cellular_no_sim |
| <i class = «custom-icons custom»> signal_cellular_null </ i> | signal_cellular_null |
| <i class = «custom-icons custom»> signal_cellular_off </ i> | signal_cellular_off |
| <i class = «custom-icons custom»> signal_wifi_4_bar </ i> | signal_wifi_4_bar |
| <i class = «custom-icons custom»> signal_wifi_4_bar_lock </ i> | signal_wifi_4_bar_lock |
| <i class = «custom-icons custom»> signal_wifi_off </ i> | signal_wifi_off |
| <i class = «custom-icons custom»> хранилище </ i> | место хранения |
| <i class = «custom-icons custom»> usb </ i> | USB |
| <i class = «material-icons custom»> обои </ i> | обои на стену |
| <i class = «material-icons custom»> виджеты </ i> | виджеты |
| <i class = «custom-icons custom»> wifi_lock </ i> | wifi_lock |
| <i class = «custom-icons custom»> signal_cellular_connected_no_internet_4_bar </ i> | signal_cellular_connected_no_internet_4_bar |
Материал — Редактор Иконки
В этой главе объясняется использование значков Google (Material) Editor. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены результаты использования значков редактора Google (Material) и их результаты. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «material-icons custom»> attach_file </ i> | прикрепить файл |
| <i class = «custom-icons custom»> attach_money </ i> | attach_money |
| <i class = «custom-icons custom»> border_all </ i> | border_all |
| <i class = «custom-icons custom»> border_bottom </ i> | border_bottom |
| <i class = «custom-icons custom»> border_clear </ i> | border_clear |
| <i class = «custom-icons custom»> border_color </ i> | цвет границы |
| <i class = «custom-icons custom»> border_horizont </ i> | border_horizontal |
| <i class = «custom-icons custom»> border_inner </ i> | border_inner |
| <i class = «custom-icons custom»> border_left </ i> | border_left |
| <i class = «custom-icons custom»> border_outer </ i> | border_outer |
| <i class = «custom-icons custom»> border_right </ i> | border_right |
| <i class = «custom-icons custom»> border_style </ i> | border_style |
| <i class = «custom-icons custom»> border_top </ i> | border_top |
| <i class = «custom-icons custom»> border_vertical </ i> | border_vertical |
| <i class = «custom-icons custom»> format_align_center </ i> | format_align_center |
| <i class = «custom-icons custom»> format_align_justify </ i> | format_align_justify |
| <i class = «custom-icons custom»> format_align_left </ i> | format_align_left |
| <i class = «custom-icons custom»> format_align_right </ i> | format_align_right |
| <i class = «custom-icons custom»> format_bold </ i> | format_bold |
| <i class = «custom-icons custom»> format_clear </ i> | format_clear |
| <i class = «custom-icons custom»> format_color_fill </ i> | format_color_fill |
| <i class = «custom-icons custom»> format_color_reset </ i> | format_color_reset |
| <i class = «custom-icons custom»> format_color_text </ i> | format_color_text |
| <i class = «custom-icons custom»> format_indent_decrease </ i> | format_indent_decrease |
| <i class = «custom-icons custom»> format_indent_increase </ i> | format_indent_increase |
| <i class = «custom-icons custom»> format_italic </ i> | format_italic |
| <i class = «custom-icons custom»> format_line_spacing </ i> | format_line_spacing |
| <i class = «custom-icons custom»> format_list_bulleted </ i> | format_list_bulleted |
| <i class = «custom-icons custom»> format_list_numbered </ i> | format_list_numbered |
| <i class = «custom-icons custom»> format_paint </ i> | format_paint |
| <i class = «custom-icons custom»> format_quote </ i> | format_quote |
| <i class = «custom-icons custom»> format_size </ i> | format_size |
| <i class = «custom-icons custom»> format_strikethrough </ i> | format_strikethrough |
| <i class = «custom-icons custom»> format_textdirection_l_to_r </ i> | format_textdirection_l_to_r |
| <i class = «custom-icons custom»> format_textdirection_r_to_l </ i> | format_textdirection_r_to_l |
| <i class = «custom-icons custom»> format_underline </ i> | format_underline |
| <i class = «custom-icons custom»> функции </ i> | функции |
| <i class = «custom-icons custom»> insert_chart </ i> | insert_chart |
| <i class = «custom-icons custom»> insert_comment </ i> | insert_comment |
| <i class = «custom-icons custom»> insert_drive_file </ i> | insert_drive_file |
| <i class = «custom-icons custom»> insert_emoticon </ i> | insert_emoticon |
| <i class = «custom-icons custom»> insert_invitation </ i> | insert_invitation |
| <i class = «custom-icons custom»> insert_link </ i> | insert_link |
| <i class = «custom-icons custom»> insert_photo </ i> | insert_photo |
| <i class = «custom-icons custom»> merge_type </ i> | merge_type |
| <i class = «custom-icons custom»> mode_comment </ i> | mode_comment |
| <i class = «custom-icons custom»> mode_edit </ i> | mode_edit |
| <i class = «custom-icons custom»> money_off </ i> | money_off |
| <i class = «custom-icons custom»> опубликовать </ i> | публиковать |
| <i class = «custom-icons custom»> пробел </ i> | space_bar |
| <i class = «custom-icons custom»> strikethrough_s </ i> | strikethrough_s |
| <i class = «custom-icons custom»> vertical_align_bottom </ i> | vertical_align_bottom |
| <i class = «custom-icons custom»> vertical_align_center </ i> | vertical_align_center |
| <i class = «custom-icons custom»> vertical_align_top </ i> | vertical_align_top |
| <i class = «custom-icons custom»> wrap_text </ i> | wrap_text |
Материал — Иконки файлов
В этой главе объясняется использование значков файлов Google (Материал). Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков файлов Google (Материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> вложение </ i> | прикрепление |
| <i class = «custom-icons custom»> облако </ i> | облако |
| <i class = «custom-icons custom»> cloud_circle </ i> | cloud_circle |
| <i class = «custom-icons custom»> cloud_done </ i> | cloud_done |
| <i class = «custom-icons custom»> cloud_download </ i> | cloud_download |
| <i class = «custom-icons custom»> cloud_off </ i> | cloud_off |
| <i class = «custom-icons custom»> cloud_queue </ i> | cloud_queue |
| <i class = «custom-icons custom»> cloud_upload </ i> | cloud_upload |
| <i class = «custom-icons custom»> file_download </ i> | скачать файл |
| <i class = «custom-icons custom»> file_upload </ i> | файл загружен |
| <i class = «custom-icons custom»> папка </ i> | папка |
| <i class = «custom-icons custom»> folder_open </ i> | folder_open |
| <i class = «custom-icons custom»> folder_shared </ i> | folder_shared |
Материал — Аппаратные иконки
В этой главе объясняется использование значков Google (Material) Hardware. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах использования значков Google (Материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> приведение </ i> | бросать |
| <i class = «custom-icons custom»> cast_connected </ i> | cast_connected |
| <i class = «custom-icons custom»> компьютер </ i> | компьютер |
| <i class = «custom-icons custom»> desktop_mac </ i> | desktop_mac |
| <i class = «custom-icons custom»> desktop_windows </ i> | desktop_windows |
| <i class = «custom-icons custom»> developer_board </ i> | developer_board |
| <i class = «custom-icons custom»> device_hub </ i> | device_hub |
| <i class = «custom-icons custom»> док </ i> | док |
| <i class = «material-icons custom»> геймпад </ i> | геймпад |
| <i class = «material-icons custom»> гарнитура </ i> | наушники |
| <i class = «custom-icons custom»> headset_mic </ i> | headset_mic |
| <i class = «custom-icons custom»> клавиатура </ i> | клавиатура |
| <i class = «custom-icons custom»> keyboard_arrow_down </ i> | keyboard_arrow_down |
| <i class = «custom-icons custom»> keyboard_arrow_left </ i> | keyboard_arrow_left |
| <i class = «custom-icons custom»> keyboard_arrow_right </ i> | keyboard_arrow_right |
| <i class = «custom-icons custom»> keyboard_arrow_up </ i> | keyboard_arrow_up |
| <i class = «custom-icons custom»> keyboard_backspace </ i> | keyboard_backspace |
| <i class = «custom-icons custom»> keyboard_capslock </ i> | keyboard_capslock |
| <i class = «custom-icons custom»> keyboard_hide </ i> | keyboard_hide |
| <i class = «custom-icons custom»> keyboard_return </ i> | keyboard_return |
| <i class = «custom-icons custom»> клавиатура_табл. </ i> | keyboard_tab |
| <i class = «custom-icons custom»> keyboard_voice </ i> | keyboard_voice |
| <i class = «custom-icons custom»> ноутбук </ i> | портативный компьютер |
| <i class = «custom-icons custom»> Laptop_chromebook </ I> | laptop_chromebook |
| <i class = «custom-icons custom»> laptop_mac </ i> | laptop_mac |
| <i class = «custom-icons custom»> laptop_windows </ i> | laptop_windows |
| <i class = «custom-icons custom»> память </ i> | объем памяти |
| <i class = «custom-icons custom»> мышь </ i> | мышь |
| <i class = «custom-icons custom»> phone_android </ i> | phone_android |
| <i class = «custom-icons custom»> phone_iphone </ i> | phone_iphone |
| <i class = «material-icons custom»> phonelink </ i> | phonelink |
| <i class = «custom-icons custom»> phonelink_off </ i> | phonelink_off |
| <i class = «custom-icons custom»> power_input </ i> | входная мощность |
| <i class = «custom-icons custom»> маршрутизатор </ i> | маршрутизатор |
| <i class = «custom-icons custom»> сканер </ i> | сканер |
| <i class = «custom-icons custom»> безопасность </ i> | безопасность |
| <i class = «custom-icons custom»> sim_card </ i> | сим-карта |
| <i class = «material-icons custom»> смартфон </ i> | смартфон |
| <i class = «material-icons custom»> динамик </ i> | оратор |
| <i class = «material-icons custom»> speaker_group </ i> | speaker_group |
| <i class = «material-icons custom»> планшет </ i> | таблетка |
| <i class = «custom-icons custom»> tablet_android </ i> | tablet_android |
| <i class = «custom-icons custom»> tablet_mac </ i> | tablet_mac |
| <i class = «material-icons custom»> игрушки </ i> | игрушки |
| <i class = «material-icons custom»> телевизор </ i> | ТВ |
| <i class = «custom-icons custom»> смотреть </ I> | часы |
Материал — Имидж иконки
В этой главе объясняется использование значков Google (Material) Image. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков Google (Material) Image. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> add_to_photos </ i> | add_to_photos |
| <i class = «custom-icons custom»> настроить </ i> | регулировать |
| <i class = «custom-icons custom»> помощник </ i> | ассистент |
| <i class = «custom-icons custom»> помощник </ i> | ассистент |
| <i class = «custom-icons custom»> аудиотрек </ i> | звуковая дорожка |
| <i class = «custom-icons custom»> blur_circular </ i> | blur_circular |
| <i class = «custom-icons custom»> blur_linear </ i> | blur_linear |
| <i class = «custom-icons custom»> blur_off </ i> | blur_off |
| <i class = «custom-icons custom»> blur_on </ i> | blur_on |
| <i class = «custom-icons custom»> яркость_1 </ i> | brightness_1 |
| <i class = «custom-icons custom»> яркость_2 </ i> | brightness_2 |
| <i class = «custom-icons custom»> яркость_3 </ i> | brightness_3 |
| <i class = «custom-icons custom»> яркость_4 </ i> | brightness_4 |
| <i class = «custom-icons custom»> яркость_5 </ i> | brightness_5 |
| <i class = «custom-icons custom»> яркость_6 </ i> | brightness_6 |
| <i class = «custom-icons custom»> яркость_7 </ i> | brightness_7 |
| <i class = «custom-icons custom»> broken_image </ i> | broken_image |
| <i class = «custom-icons custom»> кисть </ i> | щетка |
| <i class = «custom-icons custom»> камера </ i> | камера |
| <i class = «custom-icons custom»> camera_alt </ i> | camera_alt |
| <i class = «custom-icons custom»> camera_front </ i> | camera_front |
| <i class = «custom-icons custom»> camera_rear </ i> | camera_rear |
| <i class = «custom-icons custom»> camera_roll </ i> | Фотопленка |
| <i class = «custom-icons custom»> center_focus_strong </ i> | center_focus_strong |
| <i class = «custom-icons custom»> center_focus_weak </ i> | center_focus_weak |
| <i class = «custom-icons custom»> коллекции </ i> | коллекции |
| <i class = «custom-icons custom»> collection_bookmark </ i> | collections_bookmark |
| <i class = «custom-icons custom»> color_lens </ i> | color_lens |
| <i class = «custom-icons custom»> colorize </ i> | раскрасить |
| <i class = «custom-icons custom»> сравнить </ i> | сравнить |
| <i class = «custom-icons custom»> контрольная точка </ i> | контрольная точка |
| <i class = «custom-icons custom»> control_point_duplicate </ i> | control_point_duplicate |
| <i class = «custom-icons custom»> кроп </ i> | культура |
| <i class = «custom-icons custom»> crop_16_9 </ i> | crop_16_9 |
| <i class = «custom-icons custom»> crop_3_2 </ i> | crop_3_2 |
| <i class = «custom-icons custom»> crop_5_4 </ i> | crop_5_4 |
| <i class = «custom-icons custom»> crop_7_5 </ i> | crop_7_5 |
| <i class = «custom-icons custom»> crop_din </ i> | crop_din |
| <i class = «custom-icons custom»> crop_free </ i> | crop_free |
| <i class = «custom-icons custom»> crop_landscape </ i> | crop_landscape |
| <i class = «custom-icons custom»> crop_original </ i> | crop_original |
| <i class = «custom-icons custom»> crop_portrait </ i> | crop_portrait |
| <i class = «custom-icons custom»> crop_square </ i> | crop_square |
| <i class = «custom-icons custom»> dehaze </ i> | dehaze |
| <i class = «custom-icons custom»> подробности </ i> | подробности |
| <i class = «custom-icons custom»> edit </ i> | редактировать |
| <i class = «material-icons custom»> экспозиция </ i> | экспозиция |
| <i class = «custom-icons custom» >jection_neg_1 </ i> | exposure_neg_1 |
| <i class = «custom-icons custom» >jection_plus_1 </ i> | exposure_plus_1 |
| <i class = «material-icons custom» >jection_plus_2 </ i> | exposure_plus_2 |
| <i class = «custom-icons custom» >jection_zero </ i> | exposure_zero |
| <i class = «custom-icons custom»> фильтр </ i> | фильтр |
| <i class = «custom-icons custom»> filter_1 </ i> | filter_1 |
| <i class = «custom-icons custom»> filter_2 </ i> | filter_2 |
| <i class = «custom-icons custom»> filter_3 </ i> | filter_3 |
| <i class = «custom-icons custom»> filter_4 </ i> | filter_4 |
| <i class = «custom-icons custom»> filter_5 </ i> | filter_5 |
| <i class = «custom-icons custom»> filter_6 </ i> | filter_6 |
| <i class = «custom-icons custom»> filter_7 </ i> | filter_7 |
| <i class = «custom-icons custom»> filter_8 </ i> | filter_8 |
| <i class = «custom-icons custom»> filter_9 </ i> | filter_9 |
| <i class = «custom-icons custom»> filter_9_plus </ i> | filter_9_plus |
| <i class = «custom-icons custom»> filter_b_and_w </ i> | filter_b_and_w |
| <i class = «custom-icons custom»> filter_center_focus </ i> | filter_center_focus |
| <i class = «custom-icons custom»> filter_drama </ i> | filter_drama |
| <i class = «custom-icons custom»> filter_frames </ i> | filter_frames |
| <i class = «custom-icons custom»> filter_hdr </ i> | filter_hdr |
| <i class = «custom-icons custom»> filter_none </ i> | filter_none |
| <i class = «custom-icons custom»> filter_tilt_shift </ i> | filter_tilt_shift |
| <i class = «custom-icons custom»> filter_vintage </ i> | filter_vintage |
| <i class = «custom-icons custom»> вспышка </ i> | вспышка |
| <i class = «custom-icons custom»> flash_auto </ i> | flash_auto |
| <i class = «custom-icons custom»> flash_off </ i> | вспышка выключена |
| <i class = «custom-icons custom»> flash_on </ i> | flash_on |
| <i class = «custom-icons custom»> flip </ i> | кувырок |
| <i class = «custom-icons custom»> градиент </ i> | градиент |
| <i class = «material-icons custom»> зерно </ i> | зерно |
| <i class = «custom-icons custom»> grid_off </ i> | grid_off |
| <i class = «custom-icons custom»> grid_on </ i> | grid_on |
| <i class = «custom-icons custom»> hdr_off </ i> | hdr_off |
| <i class = «custom-icons custom»> hdr_on </ i> | hdr_on |
| <i class = «custom-icons custom»> hdr_strong </ i> | hdr_strong |
| <i class = «custom-icons custom»> hdr_weak </ i> | hdr_weak |
| <i class = «custom-icons custom»> лечение </ I> | исцеление |
| <i class = «custom-icons custom»> изображение </ i> | образ |
| <i class = «custom-icons custom»> image_aspect_ratio </ i> | image_aspect_ratio |
| <i class = «custom-icons custom»> iso </ i> | ISO |
| <i class = «material-icons custom»> ландшафт </ i> | пейзаж |
| <i class = «custom-icons custom»> leak_add </ i> | leak_add |
| <i class = «custom-icons custom»> leak_remove </ i> | leak_remove |
| <i class = «custom-icons custom»> объектив </ i> | объектив |
| <i class = «material-icons custom»> выглядит </ i> | выглядит |
| <i class = «custom-icons custom»> look_3 </ i> | looks_3 |
| <i class = «custom-icons custom»> look_4 </ i> | looks_4 |
| <i class = «custom-icons custom»> look_5 </ i> | looks_5 |
| <i class = «custom-icons custom»> look_6 </ i> | looks_6 |
| <i class = «custom-icons custom»> look_one </ i> | looks_one |
| <i class = «custom-icons custom»> look_two </ i> | looks_two |
| <i class = «custom-icons custom»> лупа </ i> | лупа |
| <i class = «custom-icons custom»> monochrome_photos </ i> | monochrome_photos |
| <i class = «custom-icons custom»> movie_creation </ i> | movie_creation |
| <i class = «custom-icons custom»> music_note </ i> | нота |
| <i class = «custom-icons custom»> природа </ i> | природа |
| <i class = «custom-icons custom»> nature_people </ i> | nature_people |
| <i class = «custom-icons custom»> wb_sunny </ i> | wb_sunny |
| <i class = «custom-icons custom»> navigate_next </ i> | navigate_next |
| <i class = «custom-icons custom»> navigate_before </ i> | navigate_before |
| <i class = «material-icons custom»> палитра </ i> | палитра |
| <i class = «custom-icons custom»> панорама </ i> | панорама |
| <i class = «custom-icons custom»> panorama_fish_eye </ i> | panorama_fish_eye |
| <i class = «custom-icons custom»> Panorama_horizont </ I> | panorama_horizontal |
| <i class = «custom-icons custom»> Panorama_vertical </ i> | panorama_vertical |
| <i class = «custom-icons custom»> panorama_wide_angle </ i> | panorama_wide_angle |
| <i class = «custom-icons custom»> фотография </ i> | Фото |
| <i class = «custom-icons custom»> photo_album </ i> | Фотоальбом |
| <i class = «custom-icons custom»> photo_camera </ i> | фото камера |
| <i class = «custom-icons custom»> photo_library </ i> | photo_library |
| <i class = «custom-icons custom»> photo_size_select_actual </ i> | photo_size_select_actual |
| <i class = «custom-icons custom»> photo_size_select_large </ i> | photo_size_select_large |
| <i class = «custom-icons custom»> photo_size_select_small </ i> | photo_size_select_small |
| <i class = «custom-icons custom»> picture_as_pdf </ i> | picture_as_pdf |
| <i class = «custom-icons custom»> портрет </ i> | портрет |
| <i class = «custom-icons custom»> remove_red_eye </ i> | remove_red_eye |
| <i class = «custom-icons custom»> rotate_90_degrees_ccw </ i> | rotate_90_degrees_ccw |
| <i class = «custom-icons custom»> rotate_left </ i> | поверните влево |
| <i class = «custom-icons custom»> rotate_right </ i> | rotate_right |
| <i class = «custom-icons custom»> слайд-шоу </ i> | слайд — шоу |
| <i class = «material-icons custom»> выпрямить </ i> | выпрямлять |
| <i class = «custom-icons custom»> стиль </ i> | стиль |
| <i class = «custom-icons custom»> switch_camera </ i> | switch_camera |
| <i class = «custom-icons custom»> switch_video </ i> | switch_video |
| <i class = «custom-icons custom»> tag_faces </ i> | tag_faces |
| <i class = «custom-icons custom»> текстура </ i> | текстура |
| <i class = «custom-icons custom»> timelapse </ i> | промежуток времени |
| <i class = «custom-icons custom»> таймер </ i> | таймер |
| <i class = «custom-icons custom»> timer_10 </ i> | timer_10 |
| <i class = «custom-icons custom»> timer_3 </ i> | timer_3 |
| <i class = «custom-icons custom»> timer_off </ i> | Таймер выключения |
| <i class = «material-icons custom»> тональность </ i> | тональность |
| <i class = «custom-icons custom»> transform </ i> | преобразование |
| <i class = «material-icons custom»> мелодия </ i> | мелодия |
| <i class = «custom-icons custom»> view_comfy </ i> | view_comfy |
| <i class = «custom-icons custom»> view_compact </ i> | view_compact |
| <i class = «custom-icons custom»> виньетка </ i> | виньетка |
| <i class = «custom-icons custom»> wb_auto </ i> | wb_auto |
| <i class = «custom-icons custom»> wb_cloudy </ i> | wb_cloudy |
| <i class = «custom-icons custom»> wb_incandescent </ i> | wb_incandescent |
| <i class = «custom-icons custom»> wb_iridescent </ i> | wb_iridescent |
Материал — Карты Иконки
В этой главе объясняется использование значков Google (Material) Maps. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков Google (Material) Maps. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «material-icons custom»> здесь </ i> | был тут |
| <i class = «custom-icons custom»> направления </ i> | направления |
| <i class = «custom-icons custom»> directions_bike </ i> | directions_bike |
| <i class = «material-icons custom»> directions_boat </ i> | directions_boat |
| <i class = «custom-icons custom»> directions_bus </ i> | directions_bus |
| <i class = «custom-icons custom»> directions_car </ i> | directions_car |
| <i class = «custom-icons custom»> directions_railway </ i> | directions_railway |
| <i class = «custom-icons custom»> directions_run </ i> | directions_run |
| <i class = «custom-icons custom»> directions_subway </ i> | directions_subway |
| <i class = «custom-icons custom»> directions_transit </ i> | directions_transit |
| <i class = «custom-icons custom»> directions_walk </ i> | directions_walk |
| <i class = «custom-icons custom»> полет </ i> | рейс |
| <i class = «custom-icons custom»> гостиница </ i> | Гостиница |
| <i class = «custom-icons custom»> слои </ i> | слои |
| <i class = «custom-icons custom»> Layers_clear </ I> | layers_clear |
| <i class = «custom-icons custom»> local_activity </ i> | local_activity |
| <i class = «custom-icons custom»> local_airport </ i> | local_airport |
| <i class = «custom-icons custom»> local_atm </ i> | local_atm |
| <i class = «custom-icons custom»> local_bar </ i> | local_bar |
| <i class = «custom-icons custom»> local_cafe </ i> | local_cafe |
| <i class = «custom-icons custom»> local_car_wash </ i> | local_car_wash |
| <i class = «custom-icons custom»> local_convenience_store </ i> | local_convenience_store |
| <i class = «custom-icons custom»> local_dining </ i> | local_dining |
| <i class = «custom-icons custom»> local_drink </ i> | local_drink |
| <i class = «custom-icons custom»> local_florist </ i> | local_florist |
| <i class = «custom-icons custom»> local_gas_station </ i> | local_gas_station |
| <i class = «custom-icons custom»> local_grocery_store </ i> | local_grocery_store |
| <i class = «custom-icons custom»> local_hospital </ i> | local_hospital |
| <i class = «custom-icons custom»> local_hotel </ i> | local_hotel |
| <i class = «custom-icons custom»> local_laundry_service </ i> | local_laundry_service |
| <i class = «custom-icons custom»> local_library </ i> | local_library |
| <i class = «custom-icons custom»> local_mall </ i> | local_mall |
| <i class = «material-icons custom»> local_movies </ i> | local_movies |
| <i class = «custom-icons custom»> local_offer </ i> | local_offer |
| <i class = «custom-icons custom»> local_parking </ i> | local_parking |
| <i class = «custom-icons custom»> local_pharmacy </ i> | local_pharmacy |
| <i class = «custom-icons custom»> local_phone </ i> | local_phone |
| <i class = «custom-icons custom»> local_pizza </ i> | local_pizza |
| <i class = «custom-icons custom»> local_play </ i> | local_play |
| <i class = «custom-icons custom»> local_post_office </ i> | local_post_office |
| <i class = «custom-icons custom»> local_printshop </ i> | local_printshop |
| <i class = «custom-icons custom»> local_see </ i> | local_see |
| <i class = «custom-icons custom»> local_shipping </ i> | local_shipping |
| <i class = «custom-icons custom»> local_taxi </ i> | local_taxi |
| <i class = «custom-icons custom»> карта </ i> | карта |
| <i class = «custom-icons custom»> my_location </ i> | мое местонахождение |
| <i class = «custom-icons custom»> навигация </ i> | навигация |
| <i class = «custom-icons custom»> person_pin </ i> | person_pin |
| <i class = «custom-icons custom»> pin_drop </ i> | pin_drop |
| <i class = «custom-icons custom»> place </ i> | место |
| <i class = «custom-icons custom»> rate_review </ i> | rate_review |
| <i class = «custom-icons custom»> restaurant_menu </ i> | restaurant_menu |
| <i class = «custom-icons custom»> спутник </ i> | спутник |
| <i class = «custom-icons custom»> store_mall_directory </ i> | store_mall_directory |
| <i class = «custom-icons custom»> трафик </ i> | движение |
| <i class = «material-icons custom»> ландшафт </ i> | местность |
Материал — Иконки навигации
В этой главе объясняется использование значков навигации Google (Материал). Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков навигации Google (Материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> приложения </ i> | Программы |
| <i class = «custom-icons custom»> arrow_back </ i> | arrow_back |
| <i class = «custom-icons custom»> arrow_drop_down </ i> | arrow_drop_down |
| <i class = «custom-icons custom»> arrow_drop_down_circle </ i> | arrow_drop_down_circle |
| <i class = «custom-icons custom»> arrow_drop_up </ i> | arrow_drop_up |
| <i class = «custom-icons custom»> arrow_forward </ i> | arrow_forward |
| <i class = «custom-icons custom»> отмена </ i> | отменить |
| <i class = «custom-icons custom»> check </ i> | проверять |
| <i class = «custom-icons custom»> chevron_left </ i> | chevron_left |
| <i class = «custom-icons custom»> chevron_right </ i> | chevron_right |
| <i class = «custom-icons custom»> закрыть </ i> | близко |
| <i class = «custom-icons custom»> expand_less </ i> | expand_less |
| <i class = «custom-icons custom»> expand_more </ i> | expand_more |
| <i class = «material-icons custom»> полноэкранный режим </ i> | полноэкранный |
| <i class = «custom-icons custom»> fullscreen_exit </ i> | fullscreen_exit |
| <i class = «custom-icons custom»> меню </ i> | меню |
| <i class = «custom-icons custom»> more_horiz </ i> | more_horiz |
| <i class = «custom-icons custom»> more_vert </ i> | more_vert |
| <i class = «custom-icons custom»> refresh </ i> | обновление |
Материал — значки уведомлений
В этой главе объясняется использование значков уведомлений Google (Материал). Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков уведомлений Google (Материал). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> adb </ i> | ADB |
| <i class = «custom-icons custom»> Airlines_seat_flat </ i> | airline_seat_flat |
| <i class = «custom-icons custom»> aviation_seat_flat_angled </ i> | airline_seat_flat_angled |
| <i class = «custom-icons custom»> Airlines_seat_individual_suite </ i> | airline_seat_individual_suite |
| <i class = «custom-icons custom»> aviation_seat_legroom_reduced </ i> | airline_seat_legroom_reduced |
| <i class = «custom-icons custom»> Airlines_seat_recline_extra </ i> | airline_seat_recline_extra |
| <i class = «custom-icons custom»> Airlines_seat_recline_normal </ i> | airline_seat_recline_normal |
| <i class = «custom-icons custom»> bluetooth_audio </ i> | bluetooth_audio |
| <i class = «custom-icons custom»> номер подтверждения </ i> | confirmation_number |
| <i class = «custom-icons custom»> disc_full </ i> | disc_full |
| <i class = «custom-icons custom»> do_not_disturb </ i> | не беспокоить |
| <i class = «custom-icons custom»> do_not_disturb_alt </ i> | do_not_disturb_alt |
| <i class = «custom-icons custom»> drive_eta </ i> | drive_eta |
| <i class = «custom-icons custom»> event_available </ i> | event_available |
| <i class = «custom-icons custom»> event_busy </ i> | event_busy |
| <i class = «custom-icons custom»> event_note </ i> | event_note |
| <i class = «custom-icons custom»> folder_special </ i> | folder_special |
| <i class = «custom-icons custom»> live_tv </ i> | прямой эфир |
| <i class = «custom-icons custom»> ммс </ i> | ммс |
| <i class = «custom-icons custom»> больше </ i> | Больше |
| <i class = «custom-icons custom»> network_locked </ i> | network_locked |
| <i class = «custom-icons custom»> ondemand_video </ i> | ondemand_video |
| <i class = «custom-icons custom»> personal_video </ i> | personal_video |
| <i class = «custom-icons custom»> phone_bluetooth_speaker </ i> | phone_bluetooth_speaker |
| <i class = «custom-icons custom»> phone_forwarded </ i> | phone_forwarded |
| <i class = «custom-icons custom»> phone_in_talk </ i> | phone_in_talk |
| <i class = «custom-icons custom»> phone_locked </ i> | phone_locked |
| <i class = «custom-icons custom»> phone_missed </ i> | phone_missed |
| <i class = «custom-icons custom»> phone_paused </ i> | phone_paused |
| <i class = «custom-icons custom»> power </ i> | мощность |
| <i class = «custom-icons custom»> sd_card </ i> | SD Card |
| <i class = «custom-icons custom»> sim_card_alert </ i> | sim_card_alert |
| <i class = «material-icons custom»> смс </ i> | смс |
| <i class = «custom-icons custom»> sms_failed </ i> | sms_failed |
| <i class = «custom-icons custom»> sync </ i> | синхронизировать |
| <i class = «custom-icons custom»> sync_disabled </ i> | sync_disabled |
| <i class = «custom-icons custom»> sync_problem </ i> | sync_problem |
| <i class = «custom-icons custom»> system_update </ i> | обновление системы |
| <i class = «custom-icons custom»> tap_and_play </ i> | tap_and_play |
| <i class = «custom-icons custom»> time_to_leave </ i> | TIME_TO_LEAVE |
| <i class = «custom-icons custom»> вибрация </ i> | вибрация |
| <i class = «custom-icons custom»> voice_chat </ i> | голосовой чат |
| <i class = «custom-icons custom»> vpn_lock </ i> | vpn_lock |
| <i class = «custom-icons custom»> туалет </ i> | Туалет |
| <i class = «custom-icons custom»> wifi </ i> | Wi-Fi |
Материал — социальные иконки
В этой главе объясняется использование социальных значков Google. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах социальных значков Google. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> торт </ I> | кекс |
| <i class = «custom-icons custom»> домен </ i> | домен |
| <i class = «custom-icons custom»> группа </ i> | группа |
| <i class = «custom-icons custom»> group_add </ i> | group_add |
| <i class = «custom-icons custom»> location_city </ i> | location_city |
| <i class = «custom-icons custom»> настроение </ i> | настроение |
| <i class = «custom-icons custom»> mood_bad </ i> | mood_bad |
| <i class = «custom-icons custom»> уведомления </ i> | уведомления |
| <i class = «custom-icons custom»> notifications_active </ i> | notifications_active |
| <i class = «custom-icons custom»> notifications_none </ i> | notifications_none |
| <i class = «custom-icons custom»> notifications_off </ i> | notifications_off |
| <i class = «custom-icons custom»> notifications_paused </ i> | notifications_paused |
| <i class = «custom-icons custom»> страницы </ i> | страницы |
| <i class = «custom-icons custom»> party_mode </ i> | party_mode |
| <i class = «material-icons custom»> люди </ i> | люди |
| <i class = «custom-icons custom»> people_outline </ i> | people_outline |
| <i class = «custom-icons custom»> персона </ i> | человек |
| <i class = «custom-icons custom»> person_add </ i> | person_add |
| <i class = «custom-icons custom»> person_outline </ i> | person_outline |
| <i class = «custom-icons custom»> plus_one </ i> | плюс один |
| <i class = «material-icons custom»> опрос </ i> | опрос |
| <i class = «custom-icons custom»> public </ i> | общественности |
| <i class = «custom-icons custom»> школа </ i> | школа |
| <i class = «custom-icons custom»> поделиться </ i> | доля |
| <i class = «custom-icons custom»> whatshot </ i> | whatshot |
Материал — значки-переключатели
В этой главе объясняется использование значков Google (Material) Toggle. Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
В следующей таблице приведены данные об использовании и результатах значков Google (Material) Toggle. Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —
| использование | Результат |
|---|---|
| <i class = «custom-icons custom»> check_box </ i> | check_box |
| <i class = «custom-icons custom»> check_box_outline_blank </ i> | check_box_outline_blank |
| <i class = «custom-icons custom»> indeterminate_check_box </ i> | indeterminate_check_box |
| <i class = «custom-icons custom»> radio_button_checked </ i> | radio_button_checked |
| <i class = «custom-icons custom»> radio_button_unchecked </ i> | radio_button_unchecked |
| <i class = «custom-icons custom»> звезда </ i> | звезда |
| <i class = «custom-icons custom»> star_border </ i> | star_border |
| <i class = «custom-icons custom»> star_half </ i> | star_half |
Бутстрап Глификоны
Это библиотека монохромных иконок, доступных в растровых форматах, векторных форматах и в виде шрифтов. Он обеспечивает более 250 символов в формате шрифта. Вы можете использовать эти шрифты в своих веб-проектах. Эти глифы не являются бесплатными, однако, если вам не нужно ничего тратить, если вы используете их в проектах на основе Bootstrap.
Загрузка шрифта (библиотека)
Чтобы загрузить библиотеку Bootstrap Glyphicons, скопируйте и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head>
Использование иконки
Bootstrap Glyphicons предоставляет несколько иконок. Выберите один из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали иконку дерева, а имя класса — дерево-лиственное .
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>
Это даст следующий результат —
Определение размера
Вы можете увеличить или уменьшить размер значка, определив его размер в CSS и используя его вместе с именем класса, как показано ниже. В следующем примере мы определили размер как 6 em.
<html>
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
Он выдаст следующий вывод:
Определение цвета
Вы можете определить цвет значка, используя CSS. В следующем примере показано, как изменить цвет значка дерева.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em; color: blue;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
Это даст следующий результат —
Компоненты начальной загрузки
Эта глава объясняет использование Bootstrap Glyphicons (Компоненты). Предположим, что custom — это имя класса CSS, где мы определили размер и цвет, как показано в приведенном ниже примере.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<i.custom {font-size: 2em; color: blue;}>
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous custom"></i>
</body>
</html>
Следующая таблица содержит использование и результаты Bootstrap Glyphicons (Компоненты). Замените тег <body> вышеупомянутой программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные —