Гугл иконки для сайта: Иконки Google — скачивайте бесплатно в PNG и SVG

Сайт 

CSS Иконки

При помощи специальной библиотеки графических иконок можно легко добавлять CSS иконки на вашу HTML страницу.

Как добавить CSS иконки

Самый простой способ добавить иконки на сайт это воспользоваться какой-нибудь библиотекой иконок, например, Font Awesome, Bootrap или Google.

После этого к любому строчному элементу HTML (например, <i> или <span>) добавляется специальный класс иконки, который можно узнать на сайте библиотеки иконок.

Все иконки в описанных далее библиотеках иконок являются масштабируемыми векторными изображениями, которые можно настраивать при помощи CSS (изменять размер и цвет, добавлять тени и т.п.).

Иконки Font Awesome

Чтобы добавить иконки Font Awesome, перейдите на сайт fontawesome.com, зарегистрируйтесь и получите код, который затем нужно добавить в секцию <head> вашей HTML страницы:

<script src="https://kit. fontawesome.com/вашкод.js" crossorigin="anonymous"></script>

При этом никакой загрузки или установки не требуется!

Пример:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>

Результат:

       

Иконки Bootstrap

Чтобы использовать «глификонки» Bootstrap, добавьте следующий код в секцию <head> вашей HTML страницы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

При этом никакой загрузки или установки не требуется!

Пример:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn. com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>

Результат:

Иконки Google

Чтобы использовать иконки Google, добавьте следующий код в секцию

<head> вашей HTML страницы:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

При этом никакой загрузки или установки не требуется!

Пример:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i>cloud</i>
<i>favorite</i>
<i>attachment</i>
<i>computer</i>
<i>traffic</i>
</body>
</html>

Результат:

cloud  favorite  attachment  computer  traffic

Важное обновление гайдлайнов для иконок Google Play

Google Play внедряет новую систему иконок, которая позволяет лучше приспособить разнообразные графические материалы разработчиков к различным макетам интерфейса, форм-факторам и устройствам, а также обеспечить согласованность и более чистый внешний вид в Google Play. Унифицированные формы визуально более привлекательны и легче усваиваются. Они помогают пользователям сосредоточиться на иллюстрациях, а не на форме. Они устраняют проблемы с выравниванием для лучшего представления окружающей информации, такой как заголовок, рейтинг и цена. Freeform (произвольная форма)– оригинальный формат Uniformed (унифицированный) – новый формат В этой статье описаны рекомендации, которые необходимо соблюдать при создании ресурсов для размещения приложения в Google Play. Например, поскольку Google Play динамически отображает закругленные углы и тени для иконок приложений, их следует исключить из исходных файлов.
Важное замечание: Если вы хотите узнать больше о создании APK launcher icons, которые отличаются от значков Google Play, описанных в этой статье, см. ресурсы ниже:

  • Android Adaptive Icons

Следуйте этим рекомендациям по иконкам APK, чтобы узнать, как создавать адаптивные иконки лончера, представленные в Android 8.

0 (уровень API 26).

  • Product icons

Ознакомьтесь с принципами Material Design для иконок продуктов, включая рекомендации по дизайну иконок, формам, спецификациям и обработке.

Создание ресурсов

В этом разделе описываются некоторые рекомендации, которым вы должны следовать при создании визуальных ресурсов для своего приложения в Google Play.

Атрибуты

Картинка иконки может заполнить все пространство или вы можете создавать и размещать в сетке ключевых линий такие элементы, как логотипы. Размещая иллюстрацию, рекомендуется использовать ключевые линии. Убедитесь, что ваши ресурсы соответствуют следующим характеристикам:

  • Окончательный размер: 512px x 512px
  • Формат: 32-bit PNG
  • Цветовое пространство: sRGB
  • Максимальный размер файла: 1024KB
  • Форма: Квадрат – Google Play динамически применяет маску. Радиус будет эквивалентен 20% размера иконки.
  • Тень: Отсутствует – Google Play динамически обрабатывает тени. Смотрите раздел «Тени» ниже.

Общий размер иконки Ключевые линии иконки продукта После загрузки актива Google Play динамически применяет маску с закругленными углами и тень для обеспечения согласованности всех иконок приложений / игр. Слева – ваша новая иконка. На следующих трех изображениях справа показана динамическая обработка иконки в Google Play

Определение размеров

Используйте все пространство активов в качестве фона при работе с иконками. Используйте ключевые линии в качестве руководства для размещения элементов (например, логотипов). Ваша иконка без полей (финальный актив) Конечный результат с тенями и закругленными углами, динамически применяемыми в Google Play Не заставляйте свой логотип заполнять все пространство актива. Вместо этого используйте сетку ключевых линий.

Не делайте. Не втискивайте иллюстрацию в иконку без полей Делайте. Вместо этого разместите иконку произвольной формы на ключевых линиях Иллюстрация обычно хорошо работает, как иконка без полей. Не делайте. Не уменьшайте изображение до ключевых линий. Делайте. Используйте все пространство актива, чтобы ваше изображение занимало всю иконку

Тени

Google Play будет динамически добавлять тень вокруг иконки после загрузки. При добавлении теней в изображение иконки учитывайте согласованность с платформой Android, следуя рекомендациям Google Material. Не делайте. Не добавляйте тени к финальной версии вашей иконки

Делайте. Вы можете создавать тени и освещение в пределах иллюстрации

Радиус закругления

Google Play динамически применяет радиус закругления угла. Это обеспечивает согласованность при изменении размера иконки в разных макетах интерфейса. Радиус будет эквивалентен 20% размера иконки. Не делайте. Не закругляйте края финальной версии вашего актива Делайте. Заполните весь свой актив изображением, когда это возможно

Бейджи (наклейки)

Встроенные бейджи убираются из самой иллюстрации и плохо масштабируются вместе с иконкой

Внимание. Избегайте сообщений о рекламных акциях на самом изображении Внимание. Избегайте использования брендинговых наклеек

Адаптация бренда

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

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

Режим совместимости

Исходные ресурсы иконок, которые не были обновлены в соответствии с новыми спецификациями, будут в конечном итоге переведены в «Режим совместимости» и уменьшены на 75% до размера сетки ключевых линий (512 * 0.75 = 384px). Загрузка иконки в соответствии с исходной спецификацией не будет разрешена с мая 2019 года. Ознакомьтесь с более подробной информацией о сроках. Исходные иконки будут автоматически преобразованы в активы режима совместимости и уменьшены на 75% до новой сетки ключевых линий

Скачайте шаблоны

Для начала скачайте один из предоставленных шаблонов активов:

  • Шаблон Sketch(. sketch)
  • Шаблон Illustrator(.ai)
  • Шаблон Photoshop(.psd)

Перевод статьи developer.android.com

Google Icons Intro

❮ Предыдущая Далее ❯

Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Добавьте класс material-icons к встроенному элементу и вставьте имя значка:

Пример

Следующий код:






< body>

cloud
cloud
cloud


Результат:

облако облако облако

Попробуйте сами »

Значки Google предназначены для использования со встроенными элементами. и элементы широко используются для иконок.

Примечание. Значки материалов по умолчанию имеют размер 24 пикселя.

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

Хотя значки материалов можно масштабировать до любого размера, рекомендуется Размер шрифта может быть 18, 24, 36 или 48 пикселей:

Пример

Следующий код:

cloud
cloud
cloud
cloud

Результат:

cloud облако облако облако

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Практическое руководство
Учебное пособие по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top2 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

4 FORUM 90 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *