Material google design icons: Material Icons Guide | Google Fonts

Material Design Icons for Page Builders — Плагин для WordPress

  • Детали
  • Отзывы
  • Поддержка
  • Разработка

Material Design Icons for Page Builders — adds Google Material Design Icons into Icons control of Page Builders

Supported Page Builders:
  • Elementor
  • Beaver Builder
Shortcode Generator

Generate shortcode to output an icon anywhere in the content.

Enjoy using Material Design Icons for Page Builders? You can buy a cup of coffee for me as a thank you.

Bug Report

If you find a bug, you can submit a bug report.

Credits

  • Icon font: Material Design icons https://design.google.com/icons/, (C) Google, Apache 2.0

Works fine with element and adds missing icons. I recommend

This pluggin is an easy and effective way to add the material icons set to your Elementor work flow.

Its a very useful pluging

Посмотреть все 3 отзыва

«Material Design Icons for Page Builders» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

  • Photon WP

Перевести «Material Design Icons for Page Builders» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.4.2
  • Added minor improvements
1.4.1
  • Added minor improvements
1.4.0
  • Updated icons library to 4.0.0
  • Added minor improvements
1.3.2
  • Reduced the number of css assets for Elementor and Shortcodes.
1.3.1
  • Fixed minor issues
1.3.0
  • Added Shortcode Generator
  • Updated Settings Page UI
1.
2.1
  • Added minor improvements
  • Tested on WP 5.6
1.2.0
  • Added compatibility with the Beaver Builder plugin
  • Added minor improvements
1.1.1
  • Tested on WP 5.5.1
1.1.0
  • Added the Outlined icon style
  • Updated icons library
1.0.1
  • Tested on WP 5.4
1.0.0
  • Initial Public Release

Оценки

Посмотреть все

  • 5 звёзд 3
  • 4 звезды 0
  • 3 звезды 0
  • 2 звезды 0
  • 1 звезда 0

Войдите, чтобы оставить отзыв.

Участники

  • Photon WP

Поддержка

Решено проблем за последние 2 месяца:

0 из 1

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

AUR (en) — ttf-material-design-icons-git

العربية Asturianu Català Český Dansk Deutsch Ελληνικά English Español Español (Latinoamérica) Suomi Français עברית Hrvatski Magyar Italiano 日本語 Norsk Nederlands Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Srpski Türkçe Українська 简体中文 正體中文

  • AUR Home
  • Packages
  • Register
  • Login

Search Criteria

Enter search criteria

Search by Name, DescriptionName OnlyPackage BaseExact NameExact Package BaseKeywordsMaintainerCo-maintainerMaintainer, Co-maintainerSubmitter

Keywords

Out of Date AllFlaggedNot Flagged

Sort by NameVotesPopularityVotedNotifyMaintainerLast modified

Sort order AscendingDescending

Per page 50100250

 

Package Details: ttf-material-design-icons-git v5.

3.45.r0.gcb85f87-1

Dependencies (1)

  • git (git-vfs, git-git, git-run-command-patch-git) (make)

Required by (0)

    Sources (1)

    • git+https://github.com/Templarian/MaterialDesign-Webfont.git

    Иконки Google Material Design Введение

    Здесь мы изучим значки материалов Google на примере, настроим значки дизайна материалов Google, изменим стиль / цвет значков материалов, изменим размер / размер шрифта значков материалов Google на примере.

    Значки Google Material Design

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

    Настройка значков материалов Google

    Чтобы настроить значки материалов Google, нам не нужно включать какие-либо файлы сценариев, просто добавив один файл CSS на наш веб-сайт, мы можем использовать все значки шрифтов Google.

     

    Чтобы использовать значки Материалов Google на веб-сайте, скопируйте и вставьте следующий файл css в раздел   на своем веб-сайте.

     

    После того, как мы добавим вышеуказанный файл CSS на наш веб-сайт, будет вызван CSS значков материалов для активации шрифта Значки материалов , специфичного для браузера.

     

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

     

    лицо

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

    Значки материалов Google предназначены для использования со встроенными элементами или . Для этих значков широко используются элементы или . В следующем примере показано, как использовать значки материалов на веб-сайте.

     

    Просмотр в режиме реального времени

     

    лицо

    будильник

    < i class="material-icons">android

     

    Если вы видите приведенный выше пример, мы добавили три значка: лицо пользователя, будильник и Android. Теперь запустим и посмотрим результат.

    Вывод значков Google Material Пример

    Ниже приведен пример значков материалов Google.

     

    лицо будильник android

    Изменить стиль значков Google Mater

    Мы можем изменить стиль значков, например увеличить размер шрифта, цвет и т. д., используя свойства CSS, как показано ниже.

     

    Просмотр в режиме реального времени

     

    important_devices

    important_devices

    important_devices

     

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

    Результат изменения стиля значков материалов Google

    Ниже приведен результат изменения стиля значков материалов Google.

    Важный_Devices Важный_Девс в соответствии с рекомендациями по значкам Material Design рекомендуемые размеры: 18 , 24 , 36 или 48px . В следующем примере показано, как использовать разные размеры значков.

     

    Просмотр в режиме реального времени

    /*Правила определения размера значка*/

    .material-icons.md-18 { font-size: 18px; }

    .material-icons.md-24 {размер шрифта: 24px; }

    .material-icons.md-36 {размер шрифта: 36px; }

    .material-icons.md-48 { размер шрифта: 48px; }

     

    важные_устройства

    important_devices

    important_devices

    important_devices

     

    Если вы видите приведенный выше пример, мы изменяем размер значков материала, определяя шрифт — размер в классах.

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

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