Иконки для вордпресс: Иконки WordPress — 115 бесплатных иконок

Иконки встроенные в wordpress | 🎅MnogoBlog

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

Скачать исходники для статьи можно ниже

Полный список иконок можно посмотреть здесь:
“developer.wordpress.org/resource/dashicons”

Под каждой иконкой расположен её цифровой код:

Но в большинстве случаев нам нужен не цифровой код иконки, а её название “класса” иконки, чтобы его узнать нужно кликнуть по понравившейся вам иконке и в открывшемся окошке будет указан название её класса:

Здесь же вы можете нажать на ссылку “Copy HTML” и получить код для вставки данной иконки в записях и страницах сайта:

Как же разместить иконку в записи, странице?

Для этого достаточно войти в пункт “Добавить запись/страницу” (админка – в левом меню выбираем пункт “Записи” – подпункт “Добавить новую”), здесь переходим во вкладку “Текст”:

И разместить в нем код иконки, указав необходимый “класс”:

<span></span>

Как изменить размер и цвет иконки?
Так как иконки – векторные – то увеличение ее размера – не повлияет на качестве иконки.

Для этого достаточно указать для иконки дополнительные стили, например вот так:

<span></span>

Как изменить иконки в панели управления (админке) wordpress?

Для этого вам нужно будет зайти в папку вашего сайта “\wp-includes\css\” – для этого можно воспользоваться “Файловым менеджером”, который есть на большинстве хостингах или же воспользоваться бесплатной программой — FileZilla (Total Commander или др.) – и отредактировать файл “dashicons.min” (бесплатный редактор кода NotePad++ или его аналоги).

При редактировании файла “dashicons.min” нам потребуется знать код иконки, которой мы изменяем и на которую хотим поменять.

Для примера, давайте изменим иконку пункта “Записи”:

Переходим на сайт “developer.wordpress.org/resource/dashicons” и ищем иконку “Записи”:

Код иконки “Записи” – “f109”.

Для поиска кода иконки также можно было бы воспользоваться “Инструментами разработчика”, встроенными в любой браузер – для их вызова нужно кликнуть правой клавишей мыши и выбрать пункт “Просмотр кода элемента” или нажать сочетание клавиш CTRL+SHIFT+I, а далее выбрать инструмент лупа и навести на иконку пункта “Записи”.

Далее вам нужно выбрать иконку, которую вы хотите поставить вместо иконки записи, давайте выберем вот такую:

Код данной иконки “f328”.

Все что нам осталось сделать – это заменить в файле “dashicons.min” код f109 на код f328, поэтому скачиваем файл “dashicons.min” к себе на компьютер, открываем его редактором кода NotePad++ (или его аналог), в нем можно воспользоваться функцией поиска – пункт “Поиск”, подпункт “Найти…”, в строку поиска вводим f109, находим код и меняем его на f328, сохраняем:

а далее закачиваем файл “dashicons.min” обратно на сервер сайта.

Теперь заходим в админку и любуемся результатом:

PS: Вышеуказанным способом можно менять иконки по всей админке – достаточно поменять их код в файлах, расположенных в папке “\wp-includes\css\”, например за иконки “Редактора” при Добавлении записей/страниц отвечает файл – editor.min.

Также не забывайте, что после обновления версии wordpress – все изменения иконок пропадут – и вышеуказанные действия нужно будет произвести заново.

Бесплатные плагины WordPress для добавления иконки на сайт

Хотите добавить иконку WordPress на свой сайт? Или блок функций, как их иногда называют? Блоки с иконками – это главный элемент дизайна, который показывает особенности вашего продукта, услуги, навыки и многое, что должно привлечь внимание.

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

Если вы не уверены, о чем будет идти речь, вот краткий пример типа поля значков, которое вы сможете создать к моменту окончания этого урока:

Вы узнаете, как настроить окно значков, используя три различных метода, все – бесплатные:

1. Плагин для конструктора страниц Elementor.
2. Родной редактор блоков WordPress.
3. Старый «классический» редактор WordPress (TinyMCE).

Как добавить иконку с Elementor

Для наиболее гибкого способа настройки функциональных блоков / значков WordPress вы можете использовать бесплатный плагин конструктора страниц Elementor.

Elementor будет излишним, если вы хотите добавить одну иконку на обычной странице WordPress. Однако, если вы создаете целевую страницу или страницу другого типа, вам понравится гибкость метода перетаскивания, которую предлагает Elementor.

Для начала:

1. Установите и активируйте бесплатный плагин Elementor с WordPress.org.
2. Откройте редактор WordPress для поста или страницы, куда вы хотите добавить свой значок.
3. Нажмите кнопку «Редактировать с помощью Elementor», чтобы запустить визуальный интерфейс.

В интерфейсе Elementor вы увидите предварительный просмотр вашего контента справа и боковую панель слева. Чтобы добавить свой блок, найдите «иконку» на боковой панели, а затем перетащите виджет «Иконка» на предварительный просмотр:

Как правило, вы хотите отобразить поля значков в сетке определенного типа. Нажмите на значок плюса и выберите необходимое количество столбцов. Затем вы можете добавить несколько виджетов Icon Box, чтобы создать такой эффект:

В настройках виджета Icon Box на боковой панели вы можете:

• Выбрать различные значки из Font Awesome.
• Изменить текст.
• Связать блок с другим.
• Изменить все параметры стиля и макета.

В бесплатной версии Elementor доступна функция в виде рамки для значков, а Elementor Pro добавляет массу других полезных функций.

Смотрите также:

Сравнение лучших конструкторов страниц и тем для WordPress.

Как добавить иконку с помощью редактора блоков WordPress

Если вы не хотите использовать для своего блока значков конструктор страниц Elementor, вы можете найти специальные плагины блоков значков для встроенного редактора блоков WordPress.

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

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

В этом уроке будем использовать использовать бесплатный плагин Ultimate Addons for Gutenberg, потому что он самый популярный и от того же разработчика, что и популярная тема Astra.

Тем не менее можем порекомендовать и другие плагины:

• Getwid.
• Gutentor.
• GutenBee.
• Ultimate Blocks (с блоком «Styled Box»).

Если вы предпочитаете внешний вид одного из этих плагинов, используйте его. Основные этапы будут практически одинаковыми – название блока может быть другим.

Чтобы начать, установите и активируйте бесплатный плагин Ultimate Addons for Gutenberg (или любой другой плагин, который вы выбрали) с WordPress.org.

Откройте редактор записи или страницы, куда хотите добавить свой блок, и щелкните значок «плюс». Откроется блок вставки блоков. Затем выполните поиск «Info Box»:

Теперь у вас есть значок, и чтобы:

• настроить текст, нажмите на блок и введите текст.
• настроить значок, цвета и другие элементы дизайна, можете использовать боковую панель «Блок».

Если вы хотите добавить несколько блоков значков в сетку, вы можете вложить их в собственный блок Columns. Ultimate Addons for Gutenberg  также включает в себя собственный блок столбцов, который дает немного больше гибкости под названием «Расширенные столбцы»:

Как добавить иконку с помощью классического редактора WordPress

Если вы не хотите использовать Elementor и по-прежнему используете старый классический редактор TinyMCE, лучшим вариантом для вас станет бесплатный плагин Service Box Showcase.

После того, как вы установите и активируете плагин, перейдите в Service Box → Add New Service Box на своей админ панели.

Там вы можете выбирать между двумя макетами в бесплатной версии и между многими – в Pro. Ниже вы можете настроить содержимое и значок для каждого поля. Плагин использует для своих иконок Font Awesome, что дает большую гибкость.

Чтобы настроить цвета и стиль ваших блоков, используйте настройки на боковой панели:

Ниже вы увидите короткий код, который можно добавить в любое место на сайте:

Если вы чувствуете себя ограниченным из-за вариантов дизайна плагина, можете использовать Elementor.

 

Вы узнали три бесплатных способа (и даже больше), как добавить иконку на сайт WordPress.

• Elementor – лучший вариант, если нужна полная гибкость дизайна как для панели значков, так и для всего остального контента. Он идеально подходит для целевых и других важных страниц.
• Ultimate Addons for Gutenberg – лучший вариант для работы в новом редакторе блоков WordPress.
• Service Box Showcase – хороший вариант, если вы все еще используете классический редактор TinyMCE и не хотите использовать Elementor. Он не такой гибкий, как предыдущие два плагина.

Источник: wplift.com

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Добавить иконки с помощью WordPress | Font Awesome Docs

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

Добавление значков с помощью средства выбора значков

Начиная с официального выпуска плагина 4.0, мы добавили поиск значков в плагин, чтобы вам было проще находить и вставлять нужные значки в контент WordPress.

Вы найдете параметр меню Font Awesome Icon в расширенной панели форматирования, когда вы находитесь в текстовом блоке Gutenberg (или над панелью форматирования в редакторе WordPress Classic).

Найдите элемент меню Font Awesome на расширенной панели форматирования

Вы сможете искать значки Font Awesome по имени значка, категории или ключевому слову, используя поиск Icon Chooser.

Стоп! Время молотка!

Убедитесь, что вы используете Pro Kit , если вы хотите добавить значки Pro с помощью средства выбора значков. Если вы используете CDN, вы по-прежнему можете искать и добавлять бесплатные значки, но вы не сможете добавлять значки Pro через CDN.

Средство выбора значков готово к поиску всех значков Pro, семейств и стилей, а также загруженных значков

Поиск в средстве выбора значка значка кофе с несколькими выбранными стилями

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

Шорткод значка вставлен в содержимое

Просмотр значка в режиме предварительного просмотра

Другие способы добавления значков

Вы также можете добавлять значки, используя их имена в шорткодах или HTML .

При использовании коротких кодов вы добавляете имя значка и префикс, где префикс — это стиль и семейство значка, который вы хотите использовать. Обратите внимание, что вам не нужно включать часть имени fa- . И если вы не укажете какой-либо префикс, стиль по умолчанию будет сплошным. Шорткод для значка выглядит следующим образом:

Или вы можете использовать базовый HTML со стандартным синтаксисом Font Awesome:

Использование псевдоэлементов

Псевдоэлементы CSS — это способ добавления значков до или после содержимого в HTML без редактирования. HTML, например, добавление курсора рядом с пунктом раскрывающегося меню или стрелки рядом с внешней ссылкой. Некоторые плагины или темы используют псевдоэлементы. Если вы отключите их, обязательно проверьте свой сайт на наличие отсутствующих значков.

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

Псевдоэлементы включены по умолчанию для веб-шрифтов (как в наборах, так и в CDN), поскольку они не влияют на производительность этой технологии.

Веб-иконки — Плагин WordPress

• Детали
• отзывов
• Монтаж
• Разработка

Опора

Этот плагин поможет вам легко отображать векторный шрифт значков в записи, странице или виджете.

Доступно более 2,5 тыс. иконок, которые вы можете выбрать. Вы можете настроить внешний вид, например изменить цвет, размер, выравнивание и т. д.

Доступная библиотека иконок

• Font Awesome (fontawesome) : Font Awesome предоставляет вам масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно сделать с помощью CSS.
• Fontello : Эта библиотека позволяет комбинировать веб-шрифты значков для вашего собственного веб-проекта.
• IcoMoon : IcoMoon стремится создать и предоставить лучший инструмент для иконографии и управления иконками для перфекционистов. Библиотека иконок IcoMoon содержит только самые лучшие наборы иконок.
• Open Iconic : Open Iconic — это брат Iconic с открытым исходным кодом. Это очень разборчивая коллекция из 223 иконок небольшого размера, готовая к использованию с Bootstrap.
• WordPress Dashicons : Dashicons является официальным шрифтом значков администратора WordPress с версии 3. 8.
• Шрифты Google Material Fonts : значки материалов красиво оформлены, восхитительны и просты в использовании в Интернете.
• JustVector Social Icons : Эти 150 монохромных социальных иконок разработаны с учетом простоты. Представленные в векторном формате, они полностью редактируются и плавно масштабируются до любого размера.
• Платежные шрифты : PaymentFont изначально был создан для плагина способов оплаты WooCommerce для WordPress и WooCommerce.

Рекомендуемые плагины

Ниже приведены другие плагины, рекомендованные автором:

• Лучший плагин галереи — Easy Media Gallery — это плагин WordPress, предназначенный для отображения различных медиа-поддержек, включая сетчатую галерею, галереи, фотоальбом, несколько фотоальбомов, портфолио. , фотогалерея или галерея изображений.
• Лучший плагин для слайдера изображений – Easy Image Slider Widget – Очень простое отображение вашего изображения в виде слайдера в области виджета/боковой панели. Позволяет настроить его так, чтобы он выглядел именно так, как вы хотите.
• Лучший плагин контактной формы — Лучший плагин контактной формы для создания потрясающей контактной формы за считанные минуты.
• Плагин Instagram — Плагин Instagram — очень легко отображайте свои медиафайлы Instagram в виде галереи каменной кладки на сайте WordPress.
• Лучший плагин для всплывающих окон – Лучший плагин для форм уведомлений и подписки, позволяющий отображать всплывающие окна уведомлений, объявления и форму подписки с легкостью, модностью и элегантностью.
• Best Image Carousel — Плагин WordPress с сенсорным экраном, который позволяет создавать красивую адаптивную карусель изображений.
• Лучший лайтбокс галереи — лайтбокс галереи — отображает все изображения галереи в слайдере лайтбокса всего за несколько секунд.

• Во внешнем интерфейсе
• Во внутреннем интерфейсе
• Во внешнем интерфейсе
• Во внешнем интерфейсе с пользовательским текстом

Для автоматической установки:

Самый простой способ установки — нажать «Плагины», затем «icAddon» и ввести icAddon. в поле поиска.

Для ручной установки 1:

1. Войдите на свой сайт и перейдите в раздел «Плагины» панели администратора.
2. Нажмите кнопку «Добавить новый».
3. В разделе «Установить подключаемые модули» щелкните ссылку «Загрузить».
4. Выберите zip-файл плагина (icon.x.x.x.zip) на своем компьютере, затем нажмите кнопку «Установить сейчас».
5. Вы должны увидеть сообщение об успешной установке плагина.
6. Щелкните ссылку Активировать подключаемый модуль.

Для ручной установки 2:

1. У вас должен быть доступ к серверу, на котором установлен WordPress. Если нет, обратитесь к системному администратору.
2. Скопируйте zip-файл плагина (icon.zip) на свой сервер и разархивируйте его где-нибудь в файловой системе.
3. Скопируйте папку «icon» в каталог /wp-content/plugins вашей установки WordPress.
4. Войдите на свой сайт и перейдите в раздел «Плагины» панели администратора.
5. Найдите «значок» и нажмите «Активировать».

Как использовать плагин Icon?

Нет сложных инструкций по использованию плагина Icon, просто отредактируйте свой пост/страницу и найдите кнопку генератора значков в левом верхнем углу редактора сообщений.

Как я могу получить поддержку?

• Мы не можем предоставить ничего, кроме поддержки плагина Icon на уровне сообщества.

Как я могу сказать спасибо?

• Просто порекомендуйте наш плагин своим друзьям! или
• Если вам действительно нравится плагин Icon, любое пожертвование будет признательно! Это помогает продолжить разработку и поддержку плагина.
  А если серьезно, я просто хочу пить кофе бесплатно, так что помогите разработчику. Вы можете использовать эту ссылку Donate to Icon Plugin.

Нет отзывов об этом плагине.

«Web Icons» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

Авторы

• ГозиЛаб

1.0.0.9

• Исправлено: проблема выбора значков в режиме RTL
• Обновление: совместимость с WordPress 5.9

1.0.0.7

• Исправлено: Устаревший хук media_buttons_context
• Обновление: совместимость с WordPress 5.7

1.0.0.5

• Исправлено: проблема с языком RTL

1.0.0.3

• Исправлено: кнопка генератора шорткодов исчезла в редакторе Гутенберга (версия WP 5+)

1.0.0.1

• Обновление: совместимость с WordPress 4.8
• Новые шрифты от Google Material Fonts
• Новая страница справки
• Теперь вы можете установить размер значка на средний или обычный
• Исправлено положение иконки Dashicons
• Возможность редактировать текущую иконку одним щелчком мыши. См. на странице справки.