Веб-иконки - Краткое руководство

Значок - это символ, который используется для обозначения определенного действия или возможности на веб-странице. Значки используются как в документах, так и в приложениях, и их можно выбрать или отключить. Например, все изображения, которые мы видим на кнопках приложения, представляют собой значки, и эти кнопки можно выбирать. Точно так же, когда мы используем значок в качестве логотипа компании, его обычно нельзя выбрать.

В среде Windows, если мы отключим системный звук, это будет представлено с помощью значка, как показано ниже.

Используя веб-значки, мы можем представить страницу загрузки, отключенный параметр, ссылку, перенаправление и т. Д. Эти значки можно переворачивать, вращать, изменять размер, границу, инвертировать и раскрашивать.

Иконочные шрифты

Иконочные шрифты содержат символы и глифы. После загрузки желаемого шрифта вы можете использовать любой из значков, предоставленных этим шрифтом, используя имя класса значка. Мы также можем применять разные цвета к значкам и изменять их размер с помощью свойств CSS. Существует несколько библиотек значков (шрифтов), которые содержат значки. В этом руководстве основное внимание уделяется трем основным шрифтам, а именно:

Font Awesome
Глификоны начальной загрузки
Значки материалов Google

Font Awesome

Этот шрифт содержит 519 бесплатных масштабируемых векторных иконок. Эта библиотека полностью бесплатна как для личного, так и для коммерческого использования. Эти значки можно легко настроить. Изначально они были разработаны для Bootstrap.

Глификоны начальной загрузки

Это библиотека монохроматических значков, доступных в форматах растровых изображений, форматах векторных изображений и в виде шрифтов. Он предоставляет более 250 глифов в формате шрифта. Вы можете использовать эти шрифты в своих веб-проектах. Эти значки не бесплатны, однако вы можете использовать их в проектах на основе Bootstrap, не покупая их.

Значки материалов Google

Google предоставляет около 750 значков, разработанных в соответствии с "руководящими принципами разработки материалов", и они известны как Material Designиконы. Эти значки просты и поддерживают все современные веб-браузеры. Поскольку эти значки являются векторными, они также масштабируемы. Чтобы использовать эти значки, мы должны загрузить шрифт (библиотеку)material-icons.

Библиотека иконок Font Awesome содержит 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 см.

<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. Предположим, что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. Замените тег <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-automotive 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>
<i class = "fa fa-battery-three-quters custom"> </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-треугольник на заказ"> </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-fire-extinguisher 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-global custom"> </i>
<i class = "fa fa-Graduation-cap custom"> </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-Institution 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-sign custom"> </i>
<i class = "fa fa-meh-o custom"> </i>
<i class = "fa fa-mic custom"> </i>
<i class = "fa fa-mic-slash custom"> </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-motor 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-Pencil custom"> </i>
<i class = "fa fa-Pencil-Square custom"> </i>
<i class = "fa fa-Pencil-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-register custom"> </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-in custom"> </i>
<i class = "fa fa-sign-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-view 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-TV custom"> </i>
<i class = "fa fa-terminal 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-toggle-down custom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-off custom"> </i>
<i class = "fa fa-toggle-on custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-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-wheelchair custom"> </i>
<i class = "fa fa-tv custom"> </i>
<i class = "fa fa-зонтик обычай"> </i>
<i class = "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 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 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-automotive 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-motor 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-wheelchair custom"> </i>

В этой главе объясняется использование значков 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-Interxx 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. Предположим, что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. Замените тег <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. Предположим, что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 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 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. Предположим, что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 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 fa-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 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-paragraph custom"> </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-strikethrough 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 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-toggle-down custom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-exchange custom"> </i>

В этой главе объясняется использование значков 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 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-bence custom"> </i>
<i class = "fa fa-behavior-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>
<i class = "fa fa-Delicious custom"> </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-simplebuilt 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-wine 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 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-wheelchair custom"> </i>

Google предоставляет набор из 750 значков, созданных в соответствии с "принципами материального дизайна", которые известны как Material Designиконы. Эти значки просты и поддерживают все современные веб-браузеры. Поскольку эти значки являются векторными, они также масштабируемы. Чтобы использовать эти значки, мы должны загрузить шрифт (библиотеку)material-icons.

Загрузка шрифта (библиотеки)

Чтобы загрузить библиотеку значков материалов, скопируйте и вставьте следующую строку в раздел <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 см.

<!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 для определения цвета значка. В следующем примере показано, как изменить цвет значка под названиемaccessibility.

<!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 = "material-icons custom"> 3d_rotation </i>	3d_rotation
<i class = "material-icons custom"> специальные возможности </i>	доступность
<i class = "material-icons custom"> account_balance </i>	остаток на счету
<i class = "material-icons custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icons custom"> account_box </i>	account_box
<i class = "material-icons custom"> account_circle </i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </i>	add_shopping_cart
<i class = "material-icons custom"> будильник </i>	аварийная сигнализация
<i class = "material-icons custom"> alarm_add </i>	alarm_add
<i class = "material-icons custom"> alarm_off </i>	alarm_off
<i class = "material-icons custom"> alarm_on </i>	alarm_on
<i class = "material-icons custom"> android </i>	андроид
<i class = "material-icons custom"> объявление </i>	объявление
<i class = "material-icons custom"> aspect_ratio </i>	соотношение сторон
<i class = "material-icons custom"> оценка </i>	оценка
<i class = "material-icons custom"> назначение </i>	назначение
<i class = "material-icons custom"> assignment_ind </i>	assignment_ind
<i class = "material-icons custom"> assignment_late </i>	assignment_late
<i class = "material-icons custom"> assignment_return </i>	assignment_return
<i class = "material-icons custom"> assignment_returned </i>	assignment_returned
<i class = "material-icons custom"> assignment_turned_in </i>	assignment_turned_in
<i class = "material-icons custom"> автообновление </i>	авто-обновление
<i class = "material-icons custom"> резервное копирование </i>	резервное копирование
<i class = "material-icons custom"> книга </i>	книга
<i class = "material-icons custom"> закладка </i>	закладка
<i class = "material-icons custom"> bookmark_border </i>	bookmark_border
<i class = "material-icons custom"> bug_report </i>	сообщение об ошибке
<i class = "material-icons custom"> сборка </i>	строить
<i class = "material-icons custom"> кэшировано </i>	кешированный
<i class = "material-icons custom"> camera_enhance </i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </i>	card_giftcard
<i class = "material-icons custom"> card_membership </i>	card_membership
<i class = "material-icons custom"> card_travel </i>	card_travel
<i class = "material-icons custom"> change_history </i>	change_history
<i class = "material-icons custom"> check_circle </i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </i>	chrome_reader_mode
<i class = "material-icons custom"> класс </i>	класс
<i class = "material-icons custom"> код </i>	код
<i class = "material-icons custom"> кредитная_карта </i>	кредитная карта
<i class = "material-icons custom"> панель управления </i>	приборная доска
<i class = "material-icons custom"> удалить </i>	удалять
<i class = "material-icons custom"> описание </i>	описание
<i class = "material-icons custom"> dns </i>	DNS
<i class = "material-icons custom"> готово </i>	сделанный
<i class = "material-icons custom"> done_all </i>	done_all
<i class = "material-icons custom"> извлечь </i>	выбросить
<i class = "material-icons custom"> событие </i>	событие
<i class = "material-icons custom"> event_seat </i>	event_seat
<i class = "material-icons custom"> exit_to_app </i>	exit_to_app
<i class = "material-icons custom"> исследовать </i>	исследовать
<i class = "material-icons custom"> расширение </i>	расширение
<i class = "material-icons custom"> лицо </i>	лицо
<i class = "material-icons custom"> избранное </i>	любимый
<i class = "material-icons custom"> favourite_border </i>	избранное_бордер
<i class = "material-icons custom"> отзыв </i>	Обратная связь
<i class = "material-icons custom"> find_in_page </i>	find_in_page
<i class = "material-icons custom"> find_replace </i>	find_replace
<i class = "material-icons custom"> flight_land </i>	flight_land
<i class = "material-icons custom"> flight_takeoff </i>	flight_takeoff
<i class = "material-icons custom"> flip_to_back </i>	flip_to_back
<i class = "material-icons custom"> flip_to_front </i>	flip_to_front
<i class = "material-icons custom"> get_app </i>	скачать приложение
<i class = "material-icons custom"> gif </i>	гифка
<i class = "material-icons custom"> оценка </i>	оценка
<i class = "material-icons custom"> group_work </i>	групповая работа
<i class = "material-icons custom"> справка </i>	Помогите
<i class = "material-icons custom"> help_outline </i>	help_outline
<i class = "material-icons custom"> highlight_off </i>	highlight_off
<i class = "material-icons custom"> история </i>	история
<i class = "material-icons custom"> главная </i>	Главная
<i class = "material-icons custom"> hourglass_empty </i>	песочные часы пустые
<i class = "material-icons custom"> песочные часы_full </i>	песочные часы
<i class = "material-icons custom"> http </i>	http
<i class = "material-icons custom"> https </i>	https
<i class = "material-icons custom"> информация </i>	Информация
<i class = "material-icons custom"> info_outline </i>	info_outline
<i class = "material-icons custom"> ввод </i>	ввод
<i class = "material-icons custom"> invert_colors </i>	invert_colors
<i class = "material-icons custom"> ярлык </i>	метка
<i class = "material-icons custom"> label_outline </i>	label_outline
<i class = "material-icons custom"> язык </i>	язык
<i class = "material-icons custom"> запуск </i>	запускать
Список <i class = "material-icons custom"> </i>	список
<i class = "material-icons custom"> замок </i>	замок
<i class = "material-icons custom"> lock_open </i>	lock_open
<i class = "material-icons custom"> lock_outline </i>	lock_outline
<i class = "material-icons custom"> лояльность </i>	верность
<i class = "material-icons custom"> markunread_mailbox </i>	markunread_mailbox
<i class = "material-icons custom"> note_add </i>	note_add
<i class = "material-icons custom"> offline_pin </i>	offline_pin
<i class = "material-icons custom"> open_in_browser </i>	открыть в браузере
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	открыть с
<i class = "material-icons custom"> просмотр страницы </i>	Вид страницы
<i class = "material-icons custom"> оплата </i>	оплата
<i class = "material-icons custom"> perm_camera_mic </i>	perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </i>	perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </i>	perm_data_settings
<i class = "material-icons custom"> perm_device_information </i>	perm_device_information
<i class = "material-icons custom"> perm_identity </i>	perm_identity
<i class = "material-icons custom"> perm_media </i>	perm_media
<i class = "material-icons custom"> perm_phone_msg </i>	perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </i>	perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </i>	picture_in_picture
<i class = "material-icons custom"> play_for_work </i>	play_for_work
<i class = "material-icons custom"> полимер </i>	полимер
<i class = "material-icons custom"> power_settings_new </i>	power_settings_new
<i class = "material-icons custom"> печать </i>	Распечатать
<i class = "material-icons custom"> query_builder </i>	query_builder
<i class = "material-icons custom"> question_answer </i>	вопрос ответ
<i class = "material-icons custom"> квитанция </i>	чек
<i class = "material-icons custom"> погасить </i>	выкупать
<i class = "material-icons custom"> изменить порядок </i>	Изменение порядка
<i class = "material-icons custom"> report_problem </i>	Отчет о проблемах
<i class = "material-icons custom"> восстановить </i>	восстановить
<i class = "material-icons custom"> комната </i>	комната
<i class = "material-icons custom"> расписание </i>	график
<i class = "material-icons custom"> поиск </i>	поиск
<i class = "material-icons custom"> настройки </i>	настройки
<i class = "material-icons custom"> settings_applications </i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </i>	settings_brightness
<i class = "material-icons custom"> settings_cell </i>	settings_cell
<i class = "material-icons custom"> settings_ethernet </i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </i>	settings_overscan
<i class = "material-icons custom"> settings_phone </i>	settings_phone
<i class = "material-icons custom"> settings_power </i>	settings_power
<i class = "material-icons custom"> settings_remote </i>	settings_remote
<i class = "material-icons custom"> settings_voice </i>	settings_voice
<i class = "material-icons custom"> магазин </i>	магазин
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> корзина_ покупок </i>	корзина покупателя
<i class = "material-icons custom"> shopping_cart </i>	корзина
<i class = "material-icons custom"> speaker_notes </i>	Speaker_notes
<i class = "material-icons custom"> проверка орфографии </i>	проверка орфографии
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> звезды </i>	звезды
<i class = "material-icons custom"> магазин </i>	хранить
<i class = "material-icons custom"> тема </i>	тема
<i class = "material-icons custom"> supervisor_account </i>	supervisor_account
<i class = "material-icons custom"> swap_horiz </i>	swap_horiz
<i class = "material-icons custom"> swap_vert </i>	swap_vert
<i class = "material-icons custom"> swap_vertical_circle </i>	swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </i>	system_update_alt
вкладка <i class = "material-icons custom"> </i>	вкладка
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> театры </i>	театры
<i class = "material-icons custom"> thumb_down </i>	thumb_down
<i class = "material-icons custom"> thumb_up </i>	палец вверх
<i class = "material-icons custom"> thumbs_up_down </i>	thumbs_up_down
<i class = "material-icons custom"> toc </i>	toc
<i class = "material-icons custom"> сегодня </i>	Cегодня
<i class = "material-icons custom"> платные </i>	Потери
<i class = "material-icons custom"> track_changes </i>	отслеживать изменения
<i class = "material-icons custom"> перевести </i>	переведите
<i class = "material-icons custom"> trending_down </i>	trending_down
<i class = "material-icons custom"> trending_flat </i>	trending_flat
<i class = "material-icons custom"> trending_up </i>	trending_up
<i class = "material-icons custom"> Turn_in </i>	Turn_in
<i class = "material-icons custom"> Verified_user </i>	проверенный_пользователь
<i class = "material-icons custom"> view_agenda </i>	view_agenda
<i class = "material-icons custom"> view_array </i>	view_array
<i class = "material-icons custom"> view_carousel </i>	view_carousel
<i class = "material-icons custom"> view_column </i>	view_column
<i class = "material-icons custom"> view_day </i>	view_day
<i class = "material-icons custom"> view_headline </i>	view_headline
<i class = "material-icons custom"> view_list </i>	view_list
<i class = "material-icons custom"> view_module </i>	view_module
<i class = "material-icons custom"> view_quilt </i>	view_quilt
<i class = "material-icons custom"> view_stream </i>	view_stream
<i class = "material-icons custom"> view_week </i>	view_week
<i class = "material-icons custom"> видимость </i>	видимость
<i class = "material-icons custom"> visibility_off </i>	visibility_off
<i class = "material-icons custom"> работа </i>	Работа
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons custom"> zoom_in </i>	приблизить
<i class = "material-icons custom"> zoom_out </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 = "material-icons custom"> add_alert </i>	add_alert
<i class = "material-icons custom"> ошибка </i>	ошибка
<i class = "material-icons custom"> error_outline </i>	error_outline
<i class = "material-icons custom"> предупреждение </i>	предупреждение

В этой главе объясняется использование значков 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 = "material-icons custom"> альбом </i>	альбом
<i class = "material-icons custom"> av_timer </i>	av_timer
<i class = "material-icons custom"> closed_caption </i>	closed_caption
<i class = "material-icons custom"> эквалайзер </i>	эквалайзер
<i class = "material-icons custom"> явный </i>	явный
<i class = "material-icons custom"> fast_forward </i>	перемотка вперед
<i class = "material-icons custom"> fast_rewind </i>	fast_rewind
<i class = "material-icons custom"> forward_10 </i>	forward_10
<i class = "material-icons custom"> forward_30 </i>	forward_30
<i class = "material-icons custom"> forward_5 </i>	forward_5
<i class = "material-icons custom"> игры </i>	игры
<i class = "material-icons custom"> hd </i>	HD
<i class = "material-icons custom"> слух </i>	слушание
<i class = "material-icons custom"> high_quality </i>	высокое качество
<i class = "material-icons custom"> library_add </i>	library_add
<i class = "material-icons custom"> library_books </i>	library_books
<i class = "material-icons custom"> library_music </i>	library_music
<i class = "material-icons custom"> цикл </i>	петля
<i class = "material-icons custom"> микрофон </i>	микрофон
<i class = "material-icons custom"> mic_none </i>	mic_none
<i class = "material-icons custom"> mic_off </i>	mic_off
<i class = "material-icons custom"> фильм </i>	фильм
<i class = "material-icons custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icons custom"> new_releases </i>	новые релизы
<i class = "material-icons custom"> not_intehibited </i>	не интересует
<i class = "material-icons custom"> пауза </i>	Пауза
<i class = "material-icons custom"> pause_circle_filled </i>	pause_circle_filled
<i class = "material-icons custom"> play_arrow </i>	play_arrow
<i class = "material-icons custom"> play_circle_filled </i>	play_circle_filled
<i class = "material-icons custom"> play_circle_outline </i>	play_circle_outline
<i class = "material-icons custom"> playlist_add </i>	playlist_add
<i class = "material-icons custom"> очередь </i>	очередь
<i class = "material-icons custom"> queue_music </i>	queue_music
<i class = "material-icons custom"> радио </i>	радио
<i class = "material-icons custom"> latest_actors </i>	Recent_actors
<i class = "material-icons custom"> повторить </i>	повторение
<i class = "material-icons custom"> repeat_one </i>	repeat_one
<i class = "material-icons custom"> воспроизведение </i>	переиграть
<i class = "material-icons custom"> трансляция </i>	replay_10
<i class = "material-icons custom"> replay_30 </i>	replay_30
<i class = "material-icons custom"> replay_5 </i>	replay_5
<i class = "material-icons custom"> перемешать </i>	тасовать
<i class = "material-icons custom"> skip_next </i>	skip_next
<i class = "material-icons custom"> skip_previous </i>	skip_previous
<i class = "material-icons custom"> отложить </i>	вздремнуть
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> стоп </i>	стоп
<i class = "material-icons custom"> субтитры </i>	субтитры
<i class = "material-icons custom"> Surround_sound </i>	объемный звук
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> видеокамера </i>	видеокамера
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	звук тише
<i class = "material-icons custom"> volume_mute </i>	volume_mute
<i class = "material-icons custom"> volume_off </i>	volume_off
<i class = "material-icons custom"> volume_up </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 = "material-icons custom"> бизнес </i>	бизнес
<i class = "material-icons custom"> вызов </i>	вызов
<i class = "material-icons custom"> call_made </i>	call_made
<i class = "material-icons custom"> call_merge </i>	call_merge
<i class = "material-icons custom"> call_missed </i>	call_missed
<i class = "material-icons custom"> call_received </i>	call_received
<i class = "material-icons custom"> call_split </i>	call_split
<i class = "material-icons custom"> чат </i>	болтать
<i class = "material-icons custom"> chat_bubble </i>	chat_bubble
<i class = "material-icons custom"> chat_bubble_outline </i>	chat_bubble_outline
<i class = "material-icons custom"> clear_all </i>	очистить все
<i class = "material-icons custom"> комментарий </i>	комментарий
<i class = "material-icons custom"> contact_phone </i>	Контактный телефон
<i class = "material-icons custom"> контакты </i>	контакты
<i class = "material-icons custom"> dialer_sip </i>	dialer_sip
<i class = "material-icons custom"> панель набора номера </i>	клавиатура для набора номера
<i class = "material-icons custom"> форум </i>	Форум
<i class = "material-icons custom"> import_export </i>	импорт Экспорт
<i class = "material-icons custom"> invert_colors_off </i>	invert_colors_off
<i class = "material-icons custom"> live_help </i>	live_help
<i class = "material-icons custom"> location_off </i>	location_off
<i class = "material-icons custom"> location_on </i>	Местоположение на
<i class = "material-icons custom"> сообщение </i>	сообщение
<i class = "material-icons custom"> no_sim </i>	no_sim
<i class = "material-icons custom"> телефон </i>	Телефон
<i class = "material-icons custom"> phonelink_erase </i>	phonelink_erase
<i class = "material-icons custom"> phonelink_lock </i>	phonelink_lock
<i class = "material-icons custom"> phonelink_ring </i>	телефонная ссылка
<i class = "material-icons custom"> phonelink_setup </i>	phonelink_setup
<i class = "material-icons custom"> portable_wifi_off </i>	Portable_wifi_off
<i class = "material-icons custom"> present_to_all </i>	present_to_all
<i class = "material-icons custom"> ring_volume </i>	ring_volume
<i class = "material-icons custom"> динамик_фон </i>	громкая связь
<i class = "material-icons custom"> stay_current_landscape </i>	stay_current_landscape
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> stay_primary_landscape </i>	stay_primary_landscape
<i class = "material-icons custom"> stay_primary_portrait </i>	stay_primary_portrait
<i class = "material-icons custom"> swap_calls </i>	swap_calls
<i class = "material-icons custom"> тексты </i>	тексты
<i class = "material-icons custom"> голосовая почта </i>	голосовая почта
<i class = "material-icons custom"> vpn_key </i>	vpn_key
<i class = "material-icons custom"> электронная почта </i>	Эл. адрес
<i class = "material-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 = "material-icons custom"> добавить </i>	Добавить
<i class = "material-icons custom"> add_box </i>	add_box
<i class = "material-icons custom"> add_circle </i>	add_circle
<i class = "material-icons custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icons custom"> архив </i>	архив
<i class = "material-icons custom"> backspace </i>	Backspace
<i class = "material-icons custom"> блок </i>	блокировать
<i class = "material-icons custom"> очистить </i>	Чисто
<i class = "material-icons custom"> content_copy </i>	content_copy
<i class = "material-icons custom"> content_cut </i>	content_cut
<i class = "material-icons custom"> content_paste </i>	content_paste
<i class = "material-icons custom"> создать </i>	Создайте
<i class = "material-icons custom"> черновики </i>	Черновики
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> флаг </i>	флаг
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> вперед </i>	вперед
<i class = "material-icons custom"> жест </i>	жест
<i class = "material-icons custom"> почтовый ящик </i>	почтовый ящик
<i class = "material-icons custom"> ссылка </i>	ссылка
<i class = "material-icons custom"> почта </i>	почта
<i class = "material-icons custom"> markunread </i>	пометить как непрочитанное
<i class = "material-icons custom"> повторить </i>	повторить
<i class = "material-icons custom"> удалить </i>	удалять
<i class = "material-icons custom"> remove_circle </i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icons custom"> ответ </i>	Ответить
<i class = "material-icons custom"> reply_all </i>	повторить все
<i class = "material-icons custom"> отчет </i>	отчет
<i class = "material-icons custom"> сохранить </i>	спасти
<i class = "material-icons custom"> select_all </i>	выбрать все
<i class = "material-icons custom"> отправить </i>	Отправить
<i class = "material-icons custom"> сортировка </i>	Сортировать
<i class = "material-icons custom"> text_format </i>	text_format
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<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.

Применение	Результат
<i class = "material-icons custom"> access_alarm </i>	access_alarm
<i class = "material-icons custom"> access_alarms </i>	access_alarms
<i class = "material-icons custom"> access_time </i>	время доступа
<i class = "material-icons custom"> add_alarm </i>	add_alarm
<i class = "material-icons custom"> airplanemode_active </i>	airplanemode_active
<i class = "material-icons custom"> airplanemode_inactive </i>	airplanemode_inactive
<i class = "material-icons custom"> battery_alert </i>	battery_alert
<i class = "material-icons custom"> battery_charging_full </i>	battery_charging_full
<i class = "material-icons custom"> battery_full </i>	battery_full
<i class = "material-icons custom"> battery_std </i>	battery_std
<i class = "material-icons custom"> battery_unknown </i>	battery_unknown
<i class = "material-icons custom"> bluetooth </i>	блютус
<i class = "material-icons custom"> bluetooth_connected </i>	bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </i>	bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </i>	bluetooth_searching
<i class = "material-icons custom"> яркость_авто </i>	яркость_авто
<i class = "material-icons custom"> яркость_высокая </i>	яркость_высокая
<i class = "material-icons custom"> яркость_низкая </i>	яркость_низкая
<i class = "material-icons custom"> яркость_среда </i>	яркость_среда
<i class = "material-icons custom"> data_usage </i>	Использование данных
<i class = "material-icons custom"> developer_mode </i>	режим разработчика
<i class = "material-icons custom"> устройства </i>	устройства
<i class = "material-icons custom"> видеорегистратор </i>	dvr
<i class = "material-icons custom"> gps_fixed </i>	gps_fixed
<i class = "material-icons custom"> gps_not_fixed </i>	gps_not_fixed
<i class = "material-icons custom"> gps_off </i>	gps_off
<i class = "material-icons custom"> graphic_eq </i>	graphic_eq
<i class = "material-icons custom"> location_disabled </i>	location_disabled
<i class = "material-icons custom"> location_searching </i>	location_searching
<i class = "material-icons custom"> network_cell </i>	network_cell
<i class = "material-icons custom"> network_wifi </i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </i>	screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </i>	screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </i>	вращение экрана
<i class = "material-icons custom"> sd_storage </i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </i>	signal_wifi_off
<i class = "material-icons custom"> хранилище </i>	место хранения
<i class = "material-icons custom"> usb </i>	USB
<i class = "material-icons custom"> обои </i>	обои на стену
<i class = "material-icons custom"> виджеты </i>	виджеты
<i class = "material-icons custom"> wifi_lock </i>	wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </i>	signal_cellular_connected_no_internet_4_bar

В этой главе объясняется использование значков редактора 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 = "material-icons custom"> attach_file </i>	прикрепить файл
<i class = "material-icons custom"> attach_money </i>	attach_money
<i class = "material-icons custom"> border_all </i>	border_all
<i class = "material-icons custom"> border_bottom </i>	border_bottom
<i class = "material-icons custom"> border_clear </i>	border_clear
<i class = "material-icons custom"> border_color </i>	цвет границы
<i class = "material-icons custom"> border_horizontal </i>	border_horizontal
<i class = "material-icons custom"> border_inner </i>	border_inner
<i class = "material-icons custom"> border_left </i>	border_left
<i class = "material-icons custom"> border_outer </i>	border_outer
<i class = "material-icons custom"> border_right </i>	border_right
<i class = "material-icons custom"> border_style </i>	border_style
<i class = "material-icons custom"> border_top </i>	border_top
<i class = "material-icons custom"> border_vertical </i>	border_vertical
<i class = "material-icons custom"> format_align_center </i>	format_align_center
<i class = "material-icons custom"> format_align_justify </i>	format_align_justify
<i class = "material-icons custom"> format_align_left </i>	format_align_left
<i class = "material-icons custom"> format_align_right </i>	format_align_right
<i class = "material-icons custom"> format_bold </i>	format_bold
<i class = "material-icons custom"> format_clear </i>	format_clear
<i class = "material-icons custom"> format_color_fill </i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </i>	format_color_reset
<i class = "material-icons custom"> format_color_text </i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i>	format_indent_increase
<i class = "material-icons custom"> format_italic </i>	format_italic
<i class = "material-icons custom"> format_line_spacing </i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i>	format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i>	format_list_numbered
<i class = "material-icons custom"> format_paint </i>	format_paint
<i class = "material-icons custom"> format_quote </i>	format_quote
<i class = "material-icons custom"> format_size </i>	format_size
<i class = "material-icons custom"> format_strikethrough </i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i>	format_underline
<i class = "material-icons custom"> функции </i>	функции
<i class = "material-icons custom"> insert_chart </i>	insert_chart
<i class = "material-icons custom"> insert_comment </i>	insert_comment
<i class = "material-icons custom"> insert_drive_file </i>	insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i>	insert_emoticon
<i class = "material-icons custom"> insert_invitation </i>	insert_invitation
<i class = "material-icons custom"> insert_link </i>	insert_link
<i class = "material-icons custom"> insert_photo </i>	insert_photo
<i class = "material-icons custom"> merge_type </i>	merge_type
<i class = "material-icons custom"> mode_comment </i>	mode_comment
<i class = "material-icons custom"> mode_edit </i>	mode_edit
<i class = "material-icons custom"> money_off </i>	money_off
<i class = "material-icons custom"> опубликовать </i>	публиковать
<i class = "material-icons custom"> space_bar </i>	пробел
<i class = "material-icons custom"> strikethrough_s </i>	strikethrough_s
<i class = "material-icons custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i>	vertical_align_top
<i class = "material-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 = "material-icons custom"> вложение </i>	привязанность
<i class = "material-icons custom"> облако </i>	облако
<i class = "material-icons custom"> cloud_circle </i>	cloud_circle
<i class = "material-icons custom"> cloud_done </i>	cloud_done
<i class = "material-icons custom"> cloud_download </i>	cloud_download
<i class = "material-icons custom"> cloud_off </i>	cloud_off
<i class = "material-icons custom"> cloud_queue </i>	cloud_queue
<i class = "material-icons custom"> cloud_upload </i>	cloud_upload
<i class = "material-icons custom"> file_download </i>	скачать файл
<i class = "material-icons custom"> file_upload </i>	файл загружен
<i class = "material-icons custom"> папка </i>	папка
<i class = "material-icons custom"> folder_open </i>	folder_open
<i class = "material-icons custom"> folder_shared </i>	folder_shared

В этой главе объясняется использование значков оборудования 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 = "material-icons custom"> cast </i>	бросать
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> компьютер </i>	компьютер
<i class = "material-icons custom"> desktop_mac </i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </i>	desktop_windows
<i class = "material-icons custom"> developer_board </i>	developer_board
<i class = "material-icons custom"> device_hub </i>	device_hub
<i class = "material-icons custom"> док </i>	док
<i class = "material-icons custom"> геймпад </i>	геймпад
<i class = "material-icons custom"> гарнитура </i>	гарнитура
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> клавиатура </i>	клавиатура
<i class = "material-icons custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </i>	keyboard_voice
<i class = "material-icons custom"> ноутбук </i>	ноутбук
<i class = "material-icons custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </i>	laptop_windows
<i class = "material-icons custom"> память </i>	объем памяти
<i class = "material-icons custom"> мышь </i>	мышь
<i class = "material-icons custom"> phone_android </i>	phone_android
<i class = "material-icons custom"> phone_iphone </i>	phone_iphone
<i class = "material-icons custom"> телефонная ссылка </i>	телефонная связь
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	входная мощность
<i class = "material-icons custom"> маршрутизатор </i>	маршрутизатор
<i class = "material-icons custom"> сканер </i>	сканер
<i class = "material-icons custom"> безопасность </i>	безопасность
<i class = "material-icons custom"> sim_card </i>	сим-карта
<i class = "material-icons custom"> смартфон </i>	смартфон
<i class = "material-icons custom"> динамик </i>	оратор
<i class = "material-icons custom"> динамик_группа </i>	Speaker_group
<i class = "material-icons custom"> планшет </i>	планшет
<i class = "material-icons custom"> tablet_android </i>	tablet_android
<i class = "material-icons custom"> tablet_mac </i>	tablet_mac
<i class = "material-icons custom"> игрушки </i>	игрушки
<i class = "material-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 = "material-icons custom"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> настроить </i>	отрегулировать
<i class = "material-icons custom"> помощник </i>	помощник
<i class = "material-icons custom"> помощник </i>	помощник
<i class = "material-icons custom"> аудиотрек </i>	аудио трек
<i class = "material-icons custom"> blur_circular </i>	blur_circular
<i class = "material-icons custom"> blur_linear </i>	blur_linear
<i class = "material-icons custom"> blur_off </i>	blur_off
<i class = "material-icons custom"> blur_on </i>	blur_on
<i class = "material-icons custom"> яркость_1 </i>	яркость_1
<i class = "material-icons custom"> яркость_2 </i>	яркость_2
<i class = "material-icons custom"> яркость_3 </i>	яркость_3
<i class = "material-icons custom"> яркость_4 </i>	яркость_4
<i class = "material-icons custom"> яркость_5 </i>	яркость_5
<i class = "material-icons custom"> яркость_6 </i>	яркость_6
<i class = "material-icons custom"> яркость_7 </i>	яркость_7
<i class = "material-icons custom"> broken_image </i>	broken_image
<i class = "material-icons custom"> кисть </i>	щетка
<i class = "material-icons custom"> камера </i>	камера
<i class = "material-icons custom"> camera_alt </i>	camera_alt
<i class = "material-icons custom"> camera_front </i>	camera_front
<i class = "material-icons custom"> camera_rear </i>	camera_rear
<i class = "material-icons custom"> camera_roll </i>	Фотопленка
<i class = "material-icons custom"> center_focus_strong </i>	center_focus_strong
<i class = "material-icons custom"> center_focus_weak </i>	center_focus_weak
<i class = "material-icons custom"> коллекции </i>	коллекции
<i class = "material-icons custom"> collections_bookmark </i>	collections_bookmark
<i class = "material-icons custom"> color_lens </i>	color_lens
<i class = "material-icons custom"> раскрашивать </i>	раскрашивать
<i class = "material-icons custom"> сравнить </i>	сравнить
<i class = "material-icons custom"> контрольная_точка </i>	контрольная точка
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> обрезка </i>	урожай
<i class = "material-icons custom"> crop_16_9 </i>	урожай_16_9
<i class = "material-icons custom"> crop_3_2 </i>	урожай_3_2
<i class = "material-icons custom"> crop_5_4 </i>	урожай_5_4
<i class = "material-icons custom"> crop_7_5 </i>	урожай_7_5
<i class = "material-icons custom"> crop_din </i>	урожай_дин
<i class = "material-icons custom"> crop_free </i>	Crop_free
<i class = "material-icons custom"> crop_landscape </i>	урожай_пейзаж
<i class = "material-icons custom"> crop_original </i>	урожай_оригинал
<i class = "material-icons custom"> crop_portrait </i>	crop_portrait
<i class = "material-icons custom"> crop_square </i>	урожай_квадрат
<i class = "material-icons custom"> удаление дымки </i>	устранять дымку
<i class = "material-icons custom"> подробности </i>	Детали
<i class = "material-icons custom"> изменить </i>	редактировать
<i class = "material-icons custom"> экспозиция </i>	контакт
<i class = "material-icons custom"> exc_neg_1 </i>	экспозиция_neg_1
<i class = "material-icons custom"> extension_plus_1 </i>	экспозиция_plus_1
<i class = "material-icons custom"> exc_plus_2 </i>	экспозиция_plus_2
<i class = "material-icons custom"> Exposition_zero </i>	выдержка_zero
<i class = "material-icons custom"> фильтр </i>	фильтр
<i class = "material-icons custom"> filter_1 </i>	filter_1
<i class = "material-icons custom"> filter_2 </i>	filter_2
<i class = "material-icons custom"> filter_3 </i>	filter_3
<i class = "material-icons custom"> filter_4 </i>	filter_4
<i class = "material-icons custom"> filter_5 </i>	filter_5
<i class = "material-icons custom"> filter_6 </i>	filter_6
<i class = "material-icons custom"> filter_7 </i>	filter_7
<i class = "material-icons custom"> filter_8 </i>	filter_8
<i class = "material-icons custom"> filter_9 </i>	filter_9
<i class = "material-icons custom"> filter_9_plus </i>	filter_9_plus
<i class = "material-icons custom"> filter_b_and_w </i>	filter_b_and_w
<i class = "material-icons custom"> filter_center_focus </i>	filter_center_focus
<i class = "material-icons custom"> filter_drama </i>	filter_drama
<i class = "material-icons custom"> filter_frames </i>	filter_frames
<i class = "material-icons custom"> filter_hdr </i>	filter_hdr
<i class = "material-icons custom"> filter_none </i>	filter_none
<i class = "material-icons custom"> filter_tilt_shift </i>	filter_tilt_shift
<i class = "material-icons custom"> filter_vintage </i>	filter_vintage
<i class = "material-icons custom"> вспышка </i>	вспышка
<i class = "material-icons custom"> flash_auto </i>	flash_auto
<i class = "material-icons custom"> flash_off </i>	вспышка выключена
<i class = "material-icons custom"> flash_on </i>	flash_on
<i class = "material-icons custom"> перевернуть </i>	кувырок
<i class = "material-icons custom"> градиент </i>	градиент
<i class = "material-icons custom"> зернистость </i>	зерно
<i class = "material-icons custom"> grid_off </i>	grid_off
<i class = "material-icons custom"> grid_on </i>	grid_on
<i class = "material-icons custom"> hdr_off </i>	hdr_off
<i class = "material-icons custom"> hdr_on </i>	hdr_on
<i class = "material-icons custom"> hdr_strong </i>	hdr_strong
<i class = "material-icons custom"> hdr_weak </i>	hdr_weak
<i class = "material-icons custom"> исцеление </i>	выздоровление
<i class = "material-icons custom"> изображение </i>	образ
<i class = "material-icons custom"> image_aspect_ratio </i>	image_aspect_ratio
<i class = "material-icons custom"> iso </i>	iso
<i class = "material-icons custom"> пейзаж </i>	пейзаж
<i class = "material-icons custom"> leak_add </i>	утечка_адд
<i class = "material-icons custom"> leak_remove </i>	утечка_remove
<i class = "material-icons custom"> линза </i>	линза
<i class = "material-icons custom"> выглядит </i>	выглядит
<i class = "material-icons custom"> look_3 </i>	look_3
<i class = "material-icons custom"> look_4 </i>	выглядит_4
<i class = "material-icons custom"> look_5 </i>	look_5
<i class = "material-icons custom"> look_6 </i>	выглядит_6
<i class = "material-icons custom"> look_one </i>	look_one
<i class = "material-icons custom"> look_two </i>	look_two
<i class = "material-icons custom"> лупа </i>	лупа
<i class = "material-icons custom"> монохромные_фотографии </i>	монохромные_фотографии
<i class = "material-icons custom"> movie_creation </i>	movie_creation
<i class = "material-icons custom"> music_note </i>	нота
<i class = "material-icons custom"> природа </i>	природа
<i class = "material-icons custom"> nature_people </i>	nature_people
<i class = "material-icons custom"> wb_sunny </i>	wb_sunny
<i class = "material-icons custom"> navigate_next </i>	navigate_next
<i class = "material-icons custom"> navigate_before </i>	navigate_before
<i class = "material-icons custom"> палитра </i>	палитра
<i class = "material-icons custom"> панорама </i>	панорама
<i class = "material-icons custom"> Panorama_fish_eye </i>	Panorama_fish_eye
<i class = "material-icons custom"> Panorama_horizontal </i>	Panorama_horizontal
<i class = "material-icons custom"> Panorama_vertical </i>	Panorama_vertical
<i class = "material-icons custom"> Panorama_wide_angle </i>	Panorama_wide_angle
<i class = "material-icons custom"> фото </i>	Фото
<i class = "material-icons custom"> фото_альбом </i>	Фотоальбом
<i class = "material-icons custom"> фото_камера </i>	фото камера
<i class = "material-icons custom"> photo_library </i>	photo_library
<i class = "material-icons custom"> photo_size_select_actual </i>	photo_size_select_actual
<i class = "material-icons custom"> photo_size_select_large </i>	photo_size_select_large
<i class = "material-icons custom"> photo_size_select_small </i>	photo_size_select_small
<i class = "material-icons custom"> picture_as_pdf </i>	picture_as_pdf
<i class = "material-icons custom"> портрет </i>	портрет
<i class = "material-icons custom"> remove_red_eye </i>	remove_red_eye
<i class = "material-icons custom"> rotate_90_degrees_ccw </i>	rotate_90_degrees_ccw
<i class = "material-icons custom"> rotate_left </i>	поверните влево
<i class = "material-icons custom"> rotate_right </i>	rotate_right
<i class = "material-icons custom"> слайд-шоу </i>	слайдшоу
<i class = "material-icons custom"> выпрямить </i>	выпрямить
<i class = "material-icons custom"> стиль </i>	стиль
<i class = "material-icons custom"> switch_camera </i>	switch_camera
<i class = "material-icons custom"> switch_video </i>	switch_video
<i class = "material-icons custom"> tag_faces </i>	tag_faces
<i class = "material-icons custom"> текстура </i>	текстура
<i class = "material-icons custom"> интервальная съемка </i>	промежуток времени
<i class = "material-icons custom"> таймер </i>	таймер
<i class = "material-icons custom"> timer_10 </i>	timer_10
<i class = "material-icons custom"> timer_3 </i>	timer_3
<i class = "material-icons custom"> timer_off </i>	Таймер выключения
<i class = "material-icons custom"> тональность </i>	тональность
<i class = "material-icons custom"> преобразовать </i>	преобразовать
<i class = "material-icons custom"> настроить </i>	настраивать
<i class = "material-icons custom"> view_comfy </i>	view_comfy
<i class = "material-icons custom"> view_compact </i>	view_compact
<i class = "material-icons custom"> виньетка </i>	виньетка
<i class = "material-icons custom"> wb_auto </i>	wb_auto
<i class = "material-icons custom"> wb_cloudy </i>	wb_cloudy
<i class = "material-icons custom"> wb_incandescent </i>	wb_incandescent
<i class = "material-icons custom"> wb_iridescent </i>	wb_iridescent

В этой главе объясняется использование значков (Материальных) карт 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 = "material-icons custom"> был здесь </i>	был там
<i class = "material-icons custom"> маршруты </i>	направления
<i class = "material-icons custom"> routes_bike </i>	direction_bike
<i class = "material-icons custom"> routes_boat </i>	direction_boat
<i class = "material-icons custom"> routes_bus </i>	Directions_bus
<i class = "material-icons custom"> routes_car </i>	direction_car
<i class = "material-icons custom"> routes_railway </i>	direction_railway
<i class = "material-icons custom"> routes_run </i>	direction_run
<i class = "material-icons custom"> routes_subway </i>	direction_subway
<i class = "material-icons custom"> routes_transit </i>	direction_transit
<i class = "material-icons custom"> routes_walk </i>	direction_walk
<i class = "material-icons custom"> полет </i>	рейс
<i class = "material-icons custom"> отель </i>	отель
<i class = "material-icons custom"> слои </i>	слои
<i class = "material-icons custom"> Layers_clear </i>	Layers_clear
<i class = "material-icons custom"> local_activity </i>	local_activity
<i class = "material-icons custom"> local_airport </i>	local_airport
<i class = "material-icons custom"> local_atm </i>	local_atm
<i class = "material-icons custom"> local_bar </i>	local_bar
<i class = "material-icons custom"> local_cafe </i>	local_cafe
<i class = "material-icons custom"> local_car_wash </i>	local_car_wash
<i class = "material-icons custom"> local_convenience_store </i>	local_convenience_store
<i class = "material-icons custom"> local_dining </i>	local_dining
<i class = "material-icons custom"> local_drink </i>	local_drink
<i class = "material-icons custom"> local_florist </i>	local_florist
<i class = "material-icons custom"> local_gas_station </i>	local_gas_station
<i class = "material-icons custom"> local_grocery_store </i>	local_grocery_store
<i class = "material-icons custom"> local_hospital </i>	local_hospital
<i class = "material-icons custom"> local_hotel </i>	local_hotel
<i class = "material-icons custom"> local_laundry_service </i>	local_laundry_service
<i class = "material-icons custom"> local_library </i>	local_library
<i class="material-icons custom">local_mall</i>	local_mall
<i class="material-icons custom">local_movies</i>	local_movies
<i class="material-icons custom">local_offer</i>	local_offer
<i class="material-icons custom">local_parking</i>	local_parking
<i class="material-icons custom">local_pharmacy</i>	local_pharmacy
<i class="material-icons custom">local_phone</i>	local_phone
<i class="material-icons custom">local_pizza</i>	local_pizza
<i class="material-icons custom">local_play</i>	local_play
<i class="material-icons custom">local_post_office</i>	local_post_office
<i class="material-icons custom">local_printshop</i>	local_printshop
<i class="material-icons custom">local_see</i>	local_see
<i class="material-icons custom">local_shipping</i>	local_shipping
<i class="material-icons custom">local_taxi</i>	local_taxi
<i class="material-icons custom">map</i>	map
<i class="material-icons custom">my_location</i>	my_location
<i class="material-icons custom">navigation</i>	navigation
<i class="material-icons custom">person_pin</i>	person_pin
<i class="material-icons custom">pin_drop</i>	pin_drop
<i class="material-icons custom">place</i>	place
<i class="material-icons custom">rate_review</i>	rate_review
<i class="material-icons custom">restaurant_menu</i>	restaurant_menu
<i class="material-icons custom">satellite</i>	satellite
<i class="material-icons custom">store_mall_directory</i>	store_mall_directory
<i class="material-icons custom">traffic</i>	traffic
<i class="material-icons custom">terrain</i>	terrain

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

The following table contains the usage and results of Google's (Material) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">apps</i>	apps
<i class="material-icons custom">arrow_back</i>	arrow_back
<i class="material-icons custom">arrow_drop_down</i>	arrow_drop_down
<i class="material-icons custom">arrow_drop_down_circle</i>	arrow_drop_down_circle
<i class="material-icons custom">arrow_drop_up</i>	arrow_drop_up
<i class="material-icons custom">arrow_forward</i>	arrow_forward
<i class="material-icons custom">cancel</i>	cancel
<i class="material-icons custom">check</i>	check
<i class="material-icons custom">chevron_left</i>	chevron_left
<i class="material-icons custom">chevron_right</i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

The following table contains the usage and results of Google's (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">adb</i>	adb
<i class="material-icons custom">airline_seat_flat</i>	airline_seat_flat
<i class="material-icons custom">airline_seat_flat_angled</i>	airline_seat_flat_angled
<i class="material-icons custom">airline_seat_individual_suite</i>	airline_seat_individual_suite
<i class="material-icons custom">airline_seat_legroom_reduced</i>	airline_seat_legroom_reduced
<i class="material-icons custom">airline_seat_recline_extra</i>	airline_seat_recline_extra
<i class="material-icons custom">airline_seat_recline_normal</i>	airline_seat_recline_normal
<i class="material-icons custom">bluetooth_audio</i>	bluetooth_audio
<i class="material-icons custom">confirmation_number</i>	confirmation_number
<i class="material-icons custom">disc_full</i>	disc_full
<i class="material-icons custom">do_not_disturb</i>	do_not_disturb
<i class="material-icons custom">do_not_disturb_alt</i>	do_not_disturb_alt
<i class="material-icons custom">drive_eta</i>	drive_eta
<i class="material-icons custom">event_available</i>	event_available
<i class="material-icons custom">event_busy</i>	event_busy
<i class="material-icons custom">event_note</i>	event_note
<i class="material-icons custom">folder_special</i>	folder_special
<i class="material-icons custom">live_tv</i>	live_tv
<i class="material-icons custom">mms</i>	mms
<i class="material-icons custom">more</i>	more
<i class="material-icons custom">network_locked</i>	network_locked
<i class="material-icons custom">ondemand_video</i>	ondemand_video
<i class="material-icons custom">personal_video</i>	personal_video
<i class="material-icons custom">phone_bluetooth_speaker</i>	phone_bluetooth_speaker
<i class="material-icons custom">phone_forwarded</i>	phone_forwarded
<i class="material-icons custom">phone_in_talk</i>	phone_in_talk
<i class="material-icons custom">phone_locked</i>	phone_locked
<i class="material-icons custom">phone_missed</i>	phone_missed
<i class="material-icons custom">phone_paused</i>	phone_paused
<i class="material-icons custom">power</i>	power
<i class="material-icons custom">sd_card</i>	sd_card
<i class="material-icons custom">sim_card_alert</i>	sim_card_alert
<i class="material-icons custom">sms</i>	sms
<i class="material-icons custom">sms_failed</i>	sms_failed
<i class="material-icons custom">sync</i>	sync
<i class="material-icons custom">sync_disabled</i>	sync_disabled
<i class="material-icons custom">sync_problem</i>	sync_problem
<i class="material-icons custom">system_update</i>	system_update
<i class="material-icons custom">tap_and_play</i>	tap_and_play
<i class="material-icons custom">time_to_leave</i>	time_to_leave
<i class="material-icons custom">vibration</i>	vibration
<i class="material-icons custom">voice_chat</i>	voice_chat
<i class="material-icons custom">vpn_lock</i>	vpn_lock
<i class="material-icons custom">wc</i>	wc
<i class="material-icons custom">wifi</i>	wifi

В этой главе объясняется использование значков 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 = "material-icons custom"> торт </i>	торт
<i class = "material-icons custom"> домен </i>	домен
<i class = "material-icons custom"> группа </i>	группа
<i class = "material-icons custom"> group_add </i>	group_add
<i class = "material-icons custom"> location_city </i>	location_city
<i class = "material-icons custom"> настроение </i>	настроение
<i class = "material-icons custom"> mood_bad </i>	mood_bad
<i class = "material-icons custom"> уведомления </i>	уведомления
<i class = "material-icons custom"> notifications_active </i>	notifications_active
<i class = "material-icons custom"> notifications_none </i>	notifications_none
<i class = "material-icons custom"> notifications_off </i>	notifications_off
<i class = "material-icons custom"> notifications_paused </i>	notifications_paused
<i class = "material-icons custom"> страницы </i>	страницы
<i class = "material-icons custom"> party_mode </i>	party_mode
<i class = "material-icons custom"> люди </i>	люди
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> человек </i>	человек
<i class = "material-icons custom"> person_add </i>	person_add
<i class = "material-icons custom"> person_outline </i>	person_outline
<i class = "material-icons custom"> plus_one </i>	плюс один
<i class = "material-icons custom"> опрос </i>	голосование
<i class = "material-icons custom"> общедоступные </i>	общественный
<i class = "material-icons custom"> школа </i>	школа
<i class = "material-icons custom"> поделиться </i>	Поделиться
<i class = "material-icons custom"> whatshot </i>	что

В этой главе объясняется использование значков Google (Материал) 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 (Материал) Toggle. Замените тег <body> вышеуказанной программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные -

Применение	Результат
<i class = "material-icons custom"> check_box </i>	check_box
<i class = "material-icons custom"> check_box_outline_blank </i>	check_box_outline_blank
<i class = "material-icons custom"> indeterminate_check_box </i>	indeterminate_check_box
<i class = "material-icons custom"> radio_button_checked </i>	radio_button_checked
<i class = "material-icons custom"> radio_button_unchecked </i>	radio_button_unchecked
<i class = "material-icons custom"> звездочка </i>	звезда
<i class = "material-icons custom"> star_border </i>	star_border
<i class = "material-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>. В следующем примере мы использовали значок дерева и его имя классаtree-deciduous.

<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 см.

<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> вышеуказанной программы кодом, приведенным в таблице, чтобы получить соответствующие выходные данные -

Применение	Результат
<i class = "пользовательский глификон глификон-звездочка"> </i>
<i class = "glyphicon glyphicon-plus custom"> </i>
<i class = "glyphicon glyphicon-euro custom"> </i>
<i class = "glyphicon glyphicon-minus custom"> </i>
<i class = "glyphicon glyphicon-cloud custom"> </i>
<i class = "glyphicon glyphicon-envelope custom"> </i>
<i class = "Пользовательский глификон глификон-карандаш"> </i>
<i class = "glyphicon glyphicon-glass custom"> </i>
<i class = "glyphicon glyphicon-music custom"> </i>
<i class = "glyphicon glyphicon-search custom"> </i>
<i class = "glyphicon glyphicon-heart custom"> </i>
<i class = "glyphicon glyphicon-star custom"> </i>
<i class = "glyphicon glyphicon-star-empty custom"> </i>
<i class = "glyphicon glyphicon-user custom"> </i>
<i class = "glyphicon glyphicon-film custom"> </i>
<i class = "glyphicon glyphicon-th-large custom"> </i>
<i class = "glyphicon glyphicon-th custom"> </i>
<i class = "glyphicon glyphicon-th-list custom"> </i>
<i class = "glyphicon glyphicon-ok custom"> </i>
<i class = "glyphicon glyphicon-remove custom"> </i>
<i class = "glyphicon glyphicon-zoom-in custom"> </i>
<i class = "glyphicon glyphicon-zoom-out custom"> </i>
<i class = "glyphicon glyphicon-off custom"> </i>
<i class = "glyphicon glyphicon-signal custom"> </i>
<i class = "glyphicon glyphicon-cog custom"> </i>
<i class = "glyphicon glyphicon-trash custom"> </i>
<i class = "glyphicon glyphicon-home custom"> </i>
<i class = "glyphicon glyphicon-file custom"> </i>
<i class = "glyphicon glyphicon-time custom"> </i>
<i class = "glyphicon glyphicon-road custom"> </i>
<i class = "glyphicon glyphicon-download-alt custom"> </i>
<i class = "glyphicon glyphicon-download custom"> </i>
<i class = "glyphicon glyphicon-upload custom"> </i>
<i class = "glyphicon glyphicon-inbox custom"> </i>
<i class = "glyphicon glyphicon-play-circle custom"> </i>
<i class = "glyphicon glyphicon-repeat custom"> </i>
<i class = "glyphicon glyphicon-refresh custom"> </i>
<i class = "glyphicon glyphicon-list-alt custom"> </i>
<i class = "glyphicon glyphicon-lock custom"> </i>
<i class = "glyphicon glyphicon-flag custom"> </i>
<i class = "глификон глификон-наушники на заказ"> </i>
<i class = "glyphicon glyphicon-volume-off custom"> </i>
<i class = "glyphicon glyphicon-volume-down custom"> </i>
<i class = "glyphicon glyphicon-volume-up custom"> </i>
<i class = "glyphicon glyphicon-qrcode custom"> </i>
<i class = "glyphicon glyphicon-barcode custom"> </i>
<i class = "glyphicon glyphicon-tag custom"> </i>
<i class = "glyphicon glyphicon-tags custom"> </i>
<i class = "glyphicon glyphicon-book custom"> </i>
<i class = "glyphicon glyphicon-bookmark custom"> </i>
<i class = "glyphicon glyphicon-print custom"> </i>
<i class = "glyphicon glyphicon-camera custom"> </i>
<i class = "glyphicon glyphicon-font custom"> </i>
<i class = "glyphicon glyphicon-bold custom"> </i>
<i class = "glyphicon glyphicon-italic custom"> </i>
<i class = "glyphicon glyphicon-text-height custom"> </i>
<i class = "glyphicon glyphicon-text-width custom"> </i>
<i class = "glyphicon glyphicon-align-left custom"> </i>
<i class = "glyphicon glyphicon-align-center custom"> </i>
<i class = "glyphicon glyphicon-align-right custom"> </i>
<i class = "glyphicon glyphicon-align-justify custom"> </i>
<i class = "glyphicon glyphicon-list custom"> </i>
<i class = "glyphicon glyphicon-indent-left custom"> </i>
<i class = "glyphicon glyphicon-indent-right custom"> </i>
<i class = "glyphicon glyphicon-facetime-video custom"> </i>
<i class = "glyphicon glyphicon-picture custom"> </i>
<i class = "glyphicon glyphicon-map-marker custom"> </i>
<i class = "glyphicon glyphicon-adjust custom"> </i>
<i class = "glyphicon glyphicon-tint custom"> </i>
<i class = "glyphicon glyphicon-edit custom"> </i>
<i class = "glyphicon glyphicon-share custom"> </i>
<i class = "glyphicon glyphicon-check custom"> </i>
<i class = "glyphicon glyphicon-move custom"> </i>
<i class = "glyphicon glyphicon-step-backward custom"> </i>
<i class = "glyphicon glyphicon-fast-backward custom"> </i>
<i class = "glyphicon glyphicon-backward custom"> </i>
<i class = "glyphicon glyphicon-play custom"> </i>
<i class = "glyphicon glyphicon-pause custom"> </i>
<i class = "glyphicon glyphicon-stop custom"> </i>
<i class = "glyphicon glyphicon-forward custom"> </i>
<i class = "glyphicon glyphicon-fast-forward custom"> </i>
<i class = "glyphicon glyphicon-step-forward custom"> </i>
<i class = "glyphicon glyphicon-eject custom"> </i>
<i class = "glyphicon glyphicon-chevron-left custom"> </i>
<i class = "glyphicon glyphicon-chevron-right custom"> </i>
<i class = "glyphicon glyphicon-plus-sign custom"> </i>
<i class = "glyphicon glyphicon-minus-sign custom"> </i>
<i class = "glyphicon glyphicon-remove-sign custom"> </i>
<i class = "glyphicon glyphicon-ok-sign custom"> </i>
<i class = "glyphicon glyphicon-question-sign custom"> </i>
<i class = "glyphicon glyphicon-info-sign custom"> </i>
<i class = "glyphicon glyphicon-screenshot custom"> </i>
<i class = "glyphicon glyphicon-remove-circle custom"> </i>
<i class = "glyphicon glyphicon-ok-circle custom"> </i>
<i class = "glyphicon glyphicon-ban-circle custom"> </i>
<i class = "glyphicon glyphicon-arrow-left custom"> </i>
<i class = "glyphicon glyphicon-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-share-alt custom"> </i>
<i class = "glyphicon glyphicon-resize-full custom"> </i>
<i class = "glyphicon glyphicon-resize-small custom"> </i>
<i class = "glyphicon glyphicon-exclamation-sign custom"> </i>
<i class = "glyphicon glyphicon-gift custom"> </i>
<i class = "glyphicon glyphicon-leaf custom"> </i>
<i class = "glyphicon glyphicon-fire custom"> </i>
<i class = "glyphicon glyphicon-eye-open custom"> </i>
<i class = "glyphicon glyphicon-eye-close custom"> </i>
<i class = "glyphicon glyphicon-warning-sign custom"> </i>
<i class = "glyphicon glyphicon-plane custom"> </i>
<i class = "glyphicon glyphicon-calendar custom"> </i>
<i class = "glyphicon glyphicon-random custom"> </i>
<i class = "glyphicon glyphicon-comment custom"> </i>
<i class = "glyphicon glyphicon-magnet custom"> </i>
<i class = "glyphicon glyphicon-chevron-up custom"> </i>
<i class = "glyphicon glyphicon-chevron-down custom"> </i>
<i class = "glyphicon glyphicon-retweet custom"> </i>
<i class = "glyphicon glyphicon-shopping-cart custom"> </i>
<i class = "glyphicon glyphicon-folder-close custom"> </i>
<i class = "glyphicon glyphicon-folder-open custom"> </i>
<i class = "glyphicon glyphicon-resize-vertical custom"> </i>
<i class = "glyphicon glyphicon-resize-horizontal custom"> </i>
<i class = "glyphicon glyphicon-hdd custom"> </i>
<i class = "glyphicon glyphicon-bullhorn custom"> </i>
<i class = "glyphicon glyphicon-bell custom"> </i>
<i class = "glyphicon glyphicon-certificate custom"> </i>
<i class = "glyphicon glyphicon-thumbs-up custom"> </i>
<i class = "glyphicon glyphicon-thumbs-down custom"> </i>
<i class = "glyphicon glyphicon-hand-right custom"> </i>
<i class = "glyphicon glyphicon-hand-left custom"> </i>
<i class = "glyphicon glyphicon-hand-up custom"> </i>
<i class = "glyphicon glyphicon-hand-down custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-left custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down custom"> </i>
<i class = "пользовательский глификон глификон-глобус"> </i>
<i class = "glyphicon glyphicon-wrench custom"> </i>
<i class = "glyphicon glyphicon-tasks custom"> </i>
<i class = "glyphicon glyphicon-filter custom"> </i>
<i class = "глификон глификон-портфель на заказ"> </i>
<i class = "glyphicon glyphicon-fullscreen custom"> </i>
<i class = "glyphicon glyphicon-dashboard custom"> </i>
<i class = "glyphicon glyphicon-paperclip custom"> </i>
<i class = "glyphicon glyphicon-heart-empty custom"> </i>
<i class = "glyphicon glyphicon-link custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-pushpin custom"> </i>
<i class = "glyphicon glyphicon-usd custom"> </i>
<i class = "glyphicon glyphicon-gbp custom"> </i>
<i class = "glyphicon glyphicon-sort custom"> </i>
<i class = "glyphicon glyphicon-sort-by-алфавитный заказ"> </i>
<i class = "глификон глификон-сортировка-по-алфавиту-альт настраиваемый"> </i>
<i class = "glyphicon glyphicon-sort-by-order custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order-alt custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attribute custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attributes-alt custom"> </i>
<i class = "glyphicon glyphicon-unchecked custom"> </i>
<i class = "glyphicon glyphicon-expand custom"> </i>
<i class = "glyphicon glyphicon-collapse-down custom"> </i>
<i class = "glyphicon glyphicon-collapse-up custom"> </i>
<i class = "glyphicon glyphicon-log-in custom"> </i>
<i class = "glyphicon glyphicon-flash custom"> </i>
<i class = "glyphicon glyphicon-log-out custom"> </i>
<i class = "glyphicon glyphicon-new-window custom"> </i>
<i class = "glyphicon glyphicon-record custom"> </i>
<i class = "glyphicon glyphicon-save custom"> </i>
<i class = "glyphicon glyphicon-open custom"> </i>
<i class = "глификон, сохраненный глификоном"> </i>
<i class = "glyphicon glyphicon-import custom"> </i>
<i class = "glyphicon glyphicon-export custom"> </i>
<i class = "glyphicon glyphicon-send custom"> </i>
<i class = "glyphicon glyphicon-floppy-disk custom"> </i>
<i class = "glyphicon glyphicon-floppy-saved custom"> </i>
<i class = "glyphicon glyphicon-floppy-remove custom"> </i>
<i class = "glyphicon glyphicon-floppy-save custom"> </i>
<i class = "glyphicon glyphicon-floppy-open custom"> </i>
<i class = "glyphicon glyphicon-credit-card custom"> </i>
<i class = "glyphicon glyphicon-transfer custom"> </i>
<i class = "glyphicon glyphicon-cutlery custom"> </i>
<i class = "glyphicon glyphicon-header custom"> </i>
<i class = "glyphicon glyphicon-compressed custom"> </i>
<i class = "glyphicon glyphicon-earphone custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-tower custom"> </i>
<i class = "glyphicon glyphicon-stats custom"> </i>
<i class = "glyphicon glyphicon-sd-video custom"> </i>
<i class = "glyphicon glyphicon-hd-video custom"> </i>
<i class = "glyphicon glyphicon-subtitles custom"> </i>
<i class = "glyphicon glyphicon-sound-stereo custom"> </i>
<i class = "glyphicon glyphicon-sound-dolby custom"> </i>
<i class = "glyphicon glyphicon-sound-5-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-6-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-7-1 custom"> </i>
<i class = "glyphicon glyphicon-copyright-mark custom"> </i>
<i class = "glyphicon glyphicon-registration-mark custom"> </i>
<i class = "glyphicon glyphicon-cloud-download custom"> </i>
<i class = "glyphicon glyphicon-cloud-upload custom"> </i>
<i class = "glyphicon glyphicon-tree-conifer custom"> </i>
<i class = "глификон глификон-дерево-лиственный обычай"> </i>