Google icons: Material Icons Guide | Google Fonts

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

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

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

Пример

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

cloud
cloud
cloud
cloud

Результат:

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

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

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

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

Top2 Examples Примеры HTML

4 FORUM 90 | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.

Иконки Google на компьютерах Mac и iPad

Мы уже обсуждали символы научной фантастики и их использование в Amadine в нашем блоге, но сегодня пришло время использовать еще один бесценный источник иконок — иконки Google. Это два разных официальных набора иконок Google, которые имеют одинаковый базовый дизайн. Первоначальная коллекция называется Material icons и содержит значки пяти стилей: очерченные, заполненные, закругленные, четкие и двухцветные, доступные в различных загружаемых размерах и плотности. В апреле 2022 года был представлен новый набор символов Google Material Symbols на основе шрифтов.0003

Эта обширная коллекция состоит из 2500 глифов, каждый из которых представляет определенную идею или ситуацию в «одном файле шрифта с широким спектром вариантов дизайна».

Зачем мне нужны Google Icons как дизайнеру?

Как правило, всегда приятно иметь максимально широкий набор инструментов и как можно больше вариантов значков. Но что хорошего в браузере символов Google, так это то, что есть опция поиска и возможность настроить символ в соответствии с вашими потребностями.

Каждый символ имеет четыре оси: заполнение, вес, качество и оптический размер. Ось — это свойство символа, которое можно изменить для получения различных визуальных эффектов. Вы можете изменить эти атрибуты шрифта и настроить каждый из них для каждого символа отдельно, чтобы получить идеальный результат. После этого вы сможете скачать готовый SVG именно с нужным вам символом.

Как получить значки Google в Amadine

Что можно сделать, чтобы получить значки Google? Их можно удобно просматривать на соответствующей странице Google Icons.

По сути, есть два способа получить иконки для Amadine. Первый — скачать и установить все гугловские шрифты, где есть иконки, и поискать там нужные. Это означает, что вы можете получить весь набор иконок с GitHub. В репозитории есть папка fonts, и эти шрифты можно установить в систему, но тогда вы получите стандартизированный выбор иконок, и не будет дополнительных настроек, о которых мы поговорим позже.

Но если вам нужен более простой способ, вы можете без каких-либо хлопот загрузить необходимые значки в формате SVG и включить их непосредственно в свои документы Amadine как на Mac, так и на iPad/iPhone.

Какой бы вариант добавления значков в Amadine вы ни выбрали, здесь важно отметить, что вы не должны забывать развернуть значок, чтобы он стал векторным объектом. Когда вы применяете команду «Развернуть» в приложении Amаdine, текст преобразуется в кривые, что позволяет вам изменить цвет, обводку и заливку значка.

Доступность и использование значков Google

Все значки можно использовать бесплатно, поскольку Google опубликовал их с помощью API с открытым исходным кодом для систем Web, Android и iOS. Кроме того, они доступны в репозитории GitHub, где Google хранит соответствующую библиотеку. Иконки Google могут использоваться веб-дизайнерами для улучшения UI/UX своих веб-сайтов, а также любыми энтузиастами, заинтересованными в создании собственных интерфейсов и наборов иконок.

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

Заключение

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