Wordpress

Иконки wordpress: fa-wordpress: Иконки Font Awesome

06.02.2019

Содержание

WP SVG Icons — Плагин для WordPress

Features

  • Over 490 icons included
  • Create and upload your own custom icons using the custom icon importer
  • Download and import your own custom icon build from IcoMoon
  • Insert Icons Directly Into Posts/Pages/Sidebars
  • No need to write a single line of code
  • Actively under development

New In v3.0 : Shortcode Support

Utilize the newly implemented shortcode to prevent icons from being stripped between the visual and html tabs of the editor!

(fully backwards compatible!)

Basic Plugin Demo

Consider Going Pro For Additional Features!

Pro Features

  • Icon customizer to adjust icon size, color, link and more on the fly without writing any code!
  • Unlimited number of custom icons allowed!
  • Add icons to menu items directly from within the menu edit screen
  • Animate your icons using smooth CSS3 Animations
  • Easily generate an icon container to use on your landing pages (with sweet hover effects)
  • Premium support for any troubles you may run into, or the times you’d like to achieve something more custom
  • Built in widget support for all icons
  • No need to write code or adjust shortcode parameters manually in the pro version
  • Continuously iterated on and under development

Get the premium version now!

Demo Page

Check Out The Plugin Demo Page

I originally created this plugin for my own personal use on client projects. After witnessing the power of this plugin first hand, I wanted to give a little something back to the community who have helped me through the years. The ‘WordPress SVG Icon Set’ is extremely easy for any one to use. Two clicks of the mouse and you have an icon ready to be placed on to your site. These icons are a set of web-fonts, and are extremely scale-able. Meaning they will not degrade in quality the larger they get. Another great feature of this plugin is the ability to use the same icons across all devices. No need to generate Retina specific images for mobile devices. By setting a max-width on the icon, it then becomes responsive. This plugin is also great for developers who use icons on multiple sites and want to avoid the hassle of re-installing

web fonts on to a new server every time. With this plugin its one click and you’re ready to begin working. You can use these any where in your themes.

Special Thanks Goes To:

  • IcoMoon for an amazing base set of free icon’s for use, many in this plugin.
  • Alessio Atzeni for the inclusion of a few ‘Metoicons’ icons in this plugin.
  • PJ Onori for the inclusion of a few ‘Iconic’ icons in this plugin.

and of course

  • Matt Mullenweg for everything he does for the WordPress community. Without him none of this would be possible.

Developing plugins is long and tedious work. If you benefit or enjoy this plugin please take the time to rate and review it, as this will only make future iterations of it better.

Usage Instructions

You have two possible avenues for using the plugin. Head over to the main ‘Default Icon Set’ page to generate a shortcode for your icon, or click the ‘Add Icon’ button from the post or page editor.

The icon shortcode will look like the following:

[wp-svg-icons icon="pencil-2" wrap="span"]

Custom icons utilize ‘custom_icon’ parameter instead of ‘icon’.

It is also extremely simple to change the size of the icon. You can either change the element that the icon is housed in (h2,h3,h4 etc.) or you can utilize the ‘size’ shortcode parameter.

Example:

 
[wp-svg-icons icon="menu-2" wrap="i" size="3em"]

The above shortcode will set the icon size to 3em. You may also specify ‘px’, ‘%’ or ‘rem’ as the font size.

Additionally you can easily change the icon color as well, using the ‘color’ parameter.

Example:

[wp-svg-icons icon="menu-2" wrap="i" color="#2ECC4B"]

You may also use hex, rgb or rgba values.

Example:
[wp-svg-icons icon=»menu-2″ wrap=»i» color=»rgba(45, 223, 78, 0.28)»]

The above two example shortcodes would set the color of the icon to a light green.

Additionally you can add custom classes to your icon through the use of the class shortcode parameter.

Example:


[wp-svg-icons icon=»menu-2″ wrap=»i» class=»custom-icon icon-class testing-custom-icon-class»]

The resulting HTML would look like :

Adding custom classes to your icon allows you to more easily target singular icons via CSS. This is helpful for adding hover fades, or simple CSS animations to an icon.

All Shortcode Parameters:

  • icon — the name of the icon you want this shortcode to generate
  • wrap — set the element your icon will be housed in (div, span, h2, h3 etc.)
  • class — assign additional classes to your icon. awesome for targeting your icons more easily.
  • size — alter the size of the icon regardless of the container (px, em, rem, %)
  • icon — assign a default icon
  • custom_icon — assign a custom icon
  • link — link the icon to a page or post
  • new_tab — open the link in a new tab
  • color — alter the color of the icon (hex, rgb, rgba)

Icomoon Icon Font Importer

Note: The number of custom icons allowed in the free version is limited to 10 icons. If you require more than 10 custom icons on your site, please upgrade to the pro version to allow for an un-restricted number of icons to be used on your site.

We’ve listened to your feature requests, and after many hours behind the keyboard developing, we’re pleased to announce our newest addition to WP SVG Icons.

Now, you’re no longer limited to the icons that come pre-packaged with the plugin. Create an unlimited number of custom icon combinations and start using them on your site in a matter of minutes.

Check out the demo page for icon examples, the icon playground and code samples before downloading.

добавляем изображения в пункты меню сайта. Создание меню с иконками с помощью плагина Menu Icons

Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте.

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

догадываться о том, какую информацию они найдут перейдя по пункту меню.

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

О том  как правильно создавать и настраивать меню в WordPress Вы можете почитать в одном из прошлых уроков.

Создание меню с иконками в WordPress

Для создания меню с иконками мы будем использовать плагин Menu Icons. И так, начнем!

1. Устанавливаем и активируем плагин Menu Icons. О том как установить плагины в WordPress читайте в специальном уроке.

2. Переходим в Внешний вид -> Меню.

3. Нажимаем по стрелочке вниз на пункте меню, к которому мы хотим добавить иконку.

4. В настройках пункта меню нажимаем Select.

5. В открывшемся окне выбираем иконку, и указываем параметры отображения в настройках с правой стороны.

Свойство Position отвечает за позицию иконки в меню. Если Вы выберите Before — иконка будет отображаться перед названием пункта меню, а если After — после названия

.

Vertical align отвечает за выравнивание иконки по вертикали, значение Middle (выравнивание средней точки иконки по базовой линии) будет по умолчанию. Его менять не будем.

Font Size — настройка размера иконки. Чем больше значение — тем больше размер иконки.

После выбора иконки нажимаем в нижнем правом углу кнопку Select, а после кнопку «Сохранить меню».

Вот что получилось у нас в результате:

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

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

Для того чтобы загрузить и установить свою собственную картинку нужно сделать следующее:

1. В открывшемся окне, которое появляется после нажатия на Select (в пункте меню) нажимаем Image. После этого загружаем изображение на вкладке «Загрузить файлы» или выбираем из уже загруженных ранее файлов на вкладке «Библиотека файлов».

2. Сохраняем изменения нажав кнопку «Сохранить меню».

Как видите, ничего сложного в добавлении иконок в пункты меню WordPress нету. Плагин Menu Icons не требует настроек, а добавление иконок в меню не требует особых знаний.

Если у Вас возникнут по ходу добавления иконок в меню вопросы — задавайте их в комментариях и я постараюсь Вам помочь.

Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте. Благодаря добавлению тематических изображений в пункты меню, посетители сайта смогут интуитивно догадываться о том, какую информацию они найдут перейдя по пункту меню. К примеру, для многих уже привычно видеть иконку «конверта» или «земного шара» на пункте меню ведущего на страницу контактов, или иконку «домика» на пункте меню ведущего на главную страницу сайта. О том  как правильно создавать и настраивать меню в WordPress Вы можете почитать в…

Проголосуйте за урок

Рейтинг: 4.79 ( 10 голосов ) 100

Используем шрифтовые иконки в редакторе записей WordPress (без HTML)

Шрифтовые иконки — это векторные иконки, используемые как шрифты. Они очень популярны среди веб-дизайнеров, в виду того, что они выглядят симпатичнее, нежели растровые изображения. Также они могут изменять размер без потери качества и стилизированы с помощью CSS. Именно поэтому многие темы WordPress используют шрифтовые иконки. Наиболее примечательные из них, это стандартные темы Twenty Thirteen и Twenty Fourteen. Однако для новичков может оказаться немного сложным использовать шрифтовые иконки на своих WordPress-сайтах. В этой статье мы покажем вам как использовать шрифтовые иконки в редакторе записей WordPress без единой строчки на HTML или CSS.

Первым делом вам необходимо установить и активировать плагин WP Visual Icon Fonts. После активации вам нужно перейти в раздел Параметры » Icon Fonts административной панели сйата и выбрать набор иконок шрифта. На текущий момент в плагине есть шрифты Font Awesome и Genericon.

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

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

Для того, чтобы использовать иконку в вашей теме, наиболее простым способом сгенерировать нужный код HTML будет добавление шрифтовой иконки в редактор записей, а затем переключиться в режим Текст и скопировать HTML-код. Вставьте его в ваши файлы шаблона в то место, где нужно вывести иконку.

Шрифтовые иконки могут использоваться для создания красивых посадочных страниц (landing pages) в WordPress вообще без изображений. Также их можно использовать для выделения различных разделов длинной статьи или записи. Плагин предоставляет вам 369 иконок в шрифте Font Awesome и 62 штуки в шрифте Genericon.

Надеемся, что эта статья помогла вам добавить эти красивые иконки в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 5.0/5 (2 votes cast)

Добавить иконку WordPress сайта своими силами

Вступление

Вы наверняка добавляли какой-нибудь сайт или его страницу в избранное вашего браузера. Браузер запоминает название страницы, которое вы можете поменять, и обязательно запоминает специальную картинку сайта, которую вы видите в информационном окне открытой вкладки. Эта маленькая картинка и является иконкой сайта. Как добавить иконку WordPress сайта в этом уроке.

Иконка WordPress сайта

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

Название фавикон более известно, как английское favicon или Favorites ICON, перевод – значок избранного.

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

  • Для браузера Google — это серый логотип «мира».
  • Для Opera это значок файла.
  • Браузер Mozilla вообще не показывает иконку сайта, если она не задана.
Chrome Opera Mozilla Firefox

Ранее добавление иконки на сайт WordPress было довольно сложным занятием, существовали (и существуют поныне) специальные плагины для этих целей. Сейчас всё упрощено до примитивизма. Показываю, как за 1 минуту добавить иконку WordPress сайта.

Вы сами можете добавить иконку WordPress сайта

Итак, добавляем favicon wordpress сайта по следующему алгоритму:

  • Войдите в консоль своего сайта с правами администратора;
  • В меню «Внешний вид» откройте вкладку «Темы»→ «Настройка темы»;

  • Выберите в настройках вкладку «Свойства темы»;

  • Внизу найдите раздел «Иконка сайта»;

  • Добавьте из библиотеки или загрузите с компьютера, любую, лучше заранее подготовленную, картинку для иконки.

Советую выбрать или подготовить уникальную картинку в формате png с прозрачным фоном. Рекомендуемый размер картинки 512 на 512 px. (можно немного меньше, на скринах грузится фото 319×319). Большие фото можно будет обрезать. Максимальный объём фото 999 МБ.

выбрать изображениеобрезать изображение если нужно
  • Ещё до сохранения, сделанных добавлений вы увидите в браузере (в Google точно увидите) смену иконки сайта.
  • Если вас всё устраивает – сохраните (опубликуйте) сделанные добавления.
Проверить и опубликовать

Если есть сомнения

Иконка сайта должна быть видна не только в классических браузерах. Она должна быть видна на мобильных устройствах IOS, Android, в окнах Windows 8 и 10, в не популярных браузерах типа Safari.

Если у вас есть сомнения, что предложенный метод добавить иконку WP сайта сработает, используйте современный плагин «Favicon by RealFaviconGenerator». Он гарантированно добавит иконку везде, где возможно. Кроме этого в этом плагине можно использовать для иконки картинки маленького размера от 70×70 px.

Вывод

В этом уроке я показа, добавить иконку WordPress сайта. Теперь вы это знаете.

Еще уроки

Похожие посты:

Favicon WordPress — 4 способа установить фавикон на сайт

Что такое favicon, почему плохо, если он отсутствует?
Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.
Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:
В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.
Как сделать фавикон для сайта онлайн?
Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.
Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.
В поле предпросмотра отображается, как будет выглядеть фавикон для вашего сайта на ярлыке страницы браузера.
Поставить favicon средствами ВордПресс
Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.
  1. В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
  2. В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
  3. Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.
Вставить фавикон используя возможности WordPress шаблона
В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.
  1. Войдите в меню «Внешний вид» и выберите пункт «Настроить».
  2. Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
  3. Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».
Добавить в файл header.php
Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header. php. Для внесения изменений в этот файл используйте редактор кода, например, встроенный редактор WordPress.
  1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
  2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
  3. В списке шаблонов откройте файл заголовка header.php (3).
  4. После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
  5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.
Установка favicon используя плагин Favicon by RealFaviconGenerator
Для подключения фавикона в WordPress разработаны специальные плагины, позволяющие автоматически загрузить иконку на сайт.
В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).
Из админки WordPress вас перебросит на официальный сайт плагина, где вы сможете настроить способ отображения иконки (5) для нового или работающего сайта, указать алгоритм сжатия и масштабирования картинки.
Внесите изменения при необходимости и нажмите кнопку генерации фавикона (6). После этого вы снова вернетесь в админ-панель, а плагин автоматически установит выбранный фавикон.
Почему лучше установить без использования плагина?
Для сохранения фавикона в качестве иконки сайта плагин должен оставаться активным. При его деактивации фавикон отображаться не будет.
Обратите внимание, большое количество плагинов замедляет скорость загрузки сайта, поэтому такие разовые операции, как установка фавикона, лучше выполнять без использования дополнительных плагинов – т. е. поставить фавикон первыми тремя способами.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Мы предлагаем:
Как добавить Feature Boxes с иконками в WordPress
Многие люди, которые посещают сайты, обычно не читают, что в них написано. Мы, как люди, превращаемся в профессиональные сканеры. Это, в свою очередь, значит, что как владелец бизнеса вам надо подавать свою информацию в легкодоступном виде. Поэтому многие сайты обычно используют огромное изображение или слайдер. Вы можете использовать так называемые feature boxes, в которых можно продемонстрировать несколько продуктов сразу, и каждая ячейка может быть связана с определенным действием.
Добавляем Feature Boxes с иконками на сайт
Первым делом вам надо установить и активировать плагин Advanced WP Columns. После активации зайдите в Settings > Advanced WP Columns, чтобы настроить плагин. Пролистайте вниз до Column class и введите в поле mycolumns.
Затем вам понадобится плагин, чтобы вставить красивые иконки в ваш Feature boxes. Установите и активируйте плагин WP SVG Icons. Теперь вы готовы к созданию Feature Boxes. Начните с редактирования страницы, на которой вы хотели бы их видеть. Вы заметите две новые кнопки в окне редактора постов. Первая – Add Icon – находится прямо над редактором. Следующая находится последним элементом в меню визуального редактора. Если ваш визуальный редактор показывает всего один ряд кнопок, то вам надо щелкнуть по кнопке, которая разворачивает панель кнопок.
Сперва вам надо щелкнуть по кнопке Advanced WP Columns. В появившемся окне щелкните по Empty и затем выберите число колонок, которое вы хотите добавить.
После этого надо щелкнуть по каждой колонке, чтобы добавить какой-нибудь текст. Если вы не добавите текст сейчас, то потом будет сложно видеть колонки в редакторе постов. Когда закончите, нажмите по кнопке Add Columns внизу. Теперь вы увидите колонки в своем редакторе постов. Следующим шагом будет добавление иконок над текстом. Наведите мышиный курсор на текстовое поле в первой колонке и щелкните по клавише ввода. Это уберет текст вниз и создаст место для иконок. Вам надо теперь щелкнуть по кнопке Add icon и вы увидите подобное окошко.
Оттуда вы можете выбрать иконку, которую хотите использовать, просто щелкнув по ней. Затем надо щелкнуть по кнопке span, чтобы обернуть ее в элемент . Наконец, щелкните по кнопке insert. Теперь вы увидите шорткод для иконки SVG в своем редакторе постов. В зависимости от названия выбранной иконки шорткод будет выглядеть подобным образом:
[wp-svg-icons icon=”rocket” wrap=”span”]
Повторите процесс, чтобы добавить иконки в другие Feature Boxes. Как только закончите, нажмите по кнопке Update, чтобы сохранить свою страницу. Вы почти закончили, но если сделаете предпросмотр страницы, то заметите, что иконки слишком маленькие, а ваши feature boxes едва заметны.
Вам надо будет добавить следующий CSS-код в таблицу стилей своего шаблона:
span.wp-svg-rocket.rocket { 
font-size:100px; 
} 

span.wp-svg-cloud.cloud { 
font-size:100px; 
} 
span. wp-svg-headphones.headphones { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

Не забудьте отредактировать CSS, чтобы он соответствовал названиям иконок, которые вы используете.
Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520
Как добавить иконки в меню WordPress
 Одним из весомых минусов систем управления контентом на веб-ресурсах является сложность их установки.
Предложить выход из ситуации, применимый как к WordPress, так и другим CMS, способен Softaculous, входящий в пакет программ cPanel.
Как происходит процедура установки?
Для того, чтобы установка WordPress стала возможной, необходимо первым делом зайти в меню cPanel.
В рабочем пространстве cPanel необходимо выбрать пункт “Softaculous App Installer”, что и запустит работу установщика Softaculous.
В открывшемся окне пользователю будет предложено выбрать один из наиболее популярных движков. В данном случае – WordPress.
Следующее открывшееся окно располагает сразу несколькими полями выбора. Среди их числа:
  • поле выбора протокола HTTP или HTTPS
  • поле для введения домена, на адрес которого в последствии будет установлено ПО
  • поле указания директории.
Следующим по счету выступает административный раздел. В рамках данного раздела пользователю предлагается выбрать логин администратора, а также пароль, делающий возможным последующий вход в аккаунт.
Иконка золотистого ключика – автоматический генератор паролей, позволяющий самой системе создать “сильный” пароль.
После завершения административных настроек, пользователю предлагается выбрать язык платформы. По умолчанию стоит английский язык.
В разделе дополнительных настроек или “Advanced Options” пользователю предлагается настроить базу данных, с целью последующего хранения резервной информации, а также самостоятельно определить частотность установки обновлений.
Заключительным этапом выступает выбор графического шаблона, который ляжет в основу дизайна сайта.
По завершению процесса установки, Softaculous предложит пользователю ссылку для перехода на созданный ресурс с правами администратора.
Мы закончили с установкой WordPress на хостинг https://s-host.com.ua/ и теперь можем разобраться, как добавить иконки в меню сайта. Как и в большинстве случаев, в этом нам поможет специальный плагин — Menu Icons.
Установка плагина
Перейдите на страницу установки новых плагинов (“Консоль”/”Плагины”/”Добавить новый”) и добавьте/активируйте Menu Icons. Плагин не требует каких-либо настроек, поэтому вы можете приступать к добавлению иконок в меню сразу же после установки Menu Icons.
Добавление иконок в пункты меню
Разберемся, как добавить иконки, на примере нового меню. Откройте раздел “Внешний вид”/”Меню”:
  • впишите название меню и кликните на кнопку “Создать меню”;
  • отметьте галочками нужные элементы в блоке “Страницы”;
  • нажмите “Добавить в меню”:
После того, как в блоке “Структура меню” отобразятся выбранные элементы, вы сможете “развернуть” каждый из них и присвоить иконку, кликнув на кнопку “Выбрать”:
На странице Dashicons можно просмотреть все иконки сразу или же отсортировать их по темам:
После того, как вы добавите иконки ко всем пунктам меню, сохраните изменения и перейдите на сайт, чтобы проверить, как отображается меню:
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
 WP SVG Icons — плагин для WordPress 
  Характеристики 
  •  Включено более 490 иконок
  •  Создавайте и загружайте свои собственные значки с помощью средства импорта пользовательских значков
  •  Загрузите и импортируйте свою собственную сборку значков из IcoMoon
  •  Вставка значков непосредственно в сообщения / страницы / боковые панели
  •  Не нужно писать ни строчки кода
  •  Активно в разработке
  Новое в версии 3.0: поддержка коротких кодов 
 Используйте недавно реализованный шорткод, чтобы предотвратить разделение значков между визуальной и HTML-вкладками редактора!
  (полная обратная совместимость!) 
  Базовая демонстрация плагина 
 
  Подумайте о том, чтобы стать профессионалом для дополнительных функций! 
  Pro Функции 
  •  Средство настройки значков для настройки размера, цвета, ссылок и т. Д. Значков «на лету» без написания кода!
  •  Разрешено неограниченное количество пользовательских иконок!
  •  Добавление значков в пункты меню прямо из экрана редактирования меню
  •  Анимируйте значки с помощью плавной анимации CSS3
  •  Простое создание контейнера значков для использования на целевых страницах (с эффектом приятного наведения)
  •  Премиум-поддержка для любых проблем, с которыми вы можете столкнуться, или когда вы хотите добиться чего-то более нестандартного
  •  Встроенная поддержка виджетов для  всех  иконок
  •  Нет необходимости писать код или настраивать параметры шорткода вручную в версии pro
  •  Постоянно дорабатывается и разрабатывается
 Получите премиум-версию прямо сейчас!
  Демо-страница 
 Ознакомьтесь с демонстрационной страницей плагина
 Изначально я создал этот плагин для личного использования в клиентских проектах. Убедившись в мощи этого плагина на собственном опыте, я хотел кое-что вернуть сообществу, которое помогало мне на протяжении многих лет. «Набор иконок WordPress SVG» чрезвычайно прост в использовании. Два щелчка мыши — и у вас есть значок, который можно разместить на вашем сайте. Эти значки представляют собой набор веб-шрифтов, и их можно легко масштабировать. Это означает, что они не будут ухудшаться в качестве, чем больше они станут. Еще одна замечательная особенность этого плагина — возможность использовать одни и те же значки на всех устройствах.Нет необходимости создавать изображения Retina для мобильных устройств. Если установить максимальную ширину значка, он станет отзывчивым. Этот плагин также отлично подходит для разработчиков, которые используют значки на нескольких сайтах и ​​хотят избежать хлопот, связанных с переустановкой веб-шрифтов 
 каждый раз на новый сервер. С помощью этого плагина достаточно одного щелчка мыши, и вы готовы начать работу. Вы можете использовать их где угодно в своих темах.
  Особые благодарности отправляются: 
  •  IcoMoon за потрясающий базовый набор бесплатных иконок для использования, многие из которых есть в этом плагине.
  •  Alessio Atzeni за включение нескольких значков «Metoicons» в этот плагин.
  •  PJ Onori за добавление нескольких «Iconic» значков в этот плагин.
  и конечно 
  •  Мэтту Малленвегу за все, что он делает для сообщества WordPress. Без него все это было бы невозможно.
  Разработка плагинов — долгая и утомительная работа. Если вам нравится этот плагин, пожалуйста, найдите время, чтобы оценить и просмотреть его, так как это только улучшит его будущие версии.
 Инструкция по эксплуатации 
 У вас есть два возможных пути использования плагина. Перейдите на главную страницу «Набор значков по умолчанию», чтобы сгенерировать шорткод для своего значка, или нажмите кнопку «Добавить значок» в редакторе публикации или страницы.
 Шорткод значка будет выглядеть следующим образом:
  [wp-svg-icons icon = "Pencil-2" wrap = "span"]
  
 Пользовательские значки используют параметр custom_icon вместо icon.
 Также очень просто изменить размер значка.Вы можете либо изменить элемент, в котором находится значок (h2, h3, h4 и т. Д.), Либо использовать параметр шорткода «размер».
  Пример: 
  [wp-svg-icons icon = "menu-2" wrap = "i" size = "3em"]
  
 Приведенный выше шорткод установит размер значка 3em. Вы также можете указать «px», «%» или «rem» в качестве размера шрифта.
 Кроме того, вы можете легко изменить цвет значка, используя параметр «цвет».
  Пример: 
  [wp-svg-icons icon = "menu-2" wrap = "i" color = "# 2ECC4B"]
  
 Вы также можете использовать значения в шестнадцатеричном формате, rgb или rgba.
  Пример:  
 [wp-svg-icons icon = ”menu-2 ″ wrap =” i ”color =” rgba (45, 223, 78, 0,28) ”]
 В двух приведенных выше примерах коротких кодов цвет значка будет светло-зеленым.
 Кроме того, вы можете добавлять пользовательские классы к своему значку с помощью параметра шорткода класса.
  Пример:  
 [wp-svg-icons icon = ”menu-2 ″ wrap =” i ”class =” custom-icon icon-class testing-custom-icon-class ”]
 Итоговый HTML-код будет выглядеть так:
 Добавление пользовательских классов к значку позволяет более легко настраивать таргетинг на отдельные значки через CSS.Это полезно для добавления к значку затухания при наведении или простой CSS-анимации.
  Все параметры шорткода: 
     Значок
  •  — имя значка, который вы хотите, чтобы этот шорткод генерировал
  •  wrap — установите элемент, в котором будет размещен ваш значок (div, span, h2, h3 и т. Д.)
  •  class — назначьте дополнительные классы вашему значку. отлично подходит для более простого нацеливания ваших значков.
  •  size — изменить размер значка независимо от контейнера (px, em, rem,%)
    •  Значок
  •  — назначить значок по умолчанию
  •  custom_icon — назначить собственный значок
    •  Ссылка
  •  — привязать иконку к странице или посту
  •  new_tab — открыть ссылку в новой вкладке
  •  color — изменить цвет иконки (hex, rgb, rgba)
  Icomoon Icon Font Importer 
  Примечание:  Количество настраиваемых значков, разрешенных в бесплатной версии, ограничено 10 значками. Если вам требуется более 10 пользовательских значков на вашем сайте, обновите его до профессиональной версии, чтобы на вашем сайте можно было использовать неограниченное количество значков.
 
 Мы прислушались к вашим запросам на добавление функций и после многих часов ожидания разработки клавиатуры рады объявить о нашем новом дополнении к WP SVG Icons.
 Теперь вы больше не ограничены иконками, которые поставляются в комплекте с плагином. Создайте неограниченное количество пользовательских комбинаций значков и начните использовать их на своем сайте за считанные минуты.
 Перед загрузкой ознакомьтесь с демонстрационной страницей с примерами значков, игровой площадкой для значков и примерами кода.
 Иконки WP и Divi | Divi Space 
 один сайт / 3 сайта / неограниченное количество сайтов 
 В зависимости от выбранного вами варианта вы можете активировать продукт на одном, трех или неограниченном количестве сайтов. Ваша лицензия будет автоматически продлеваться и ежегодно выставлять счет на оплату покупной цены, которую вы изначально заплатили при покупке продукта.Вы можете отменить подписку в любое время через Моя учетная запись> Подписки. Вы будете получать поддержку и все обновления (исправления ошибок, обновления безопасности и обновления функций) бесплатно для всех продуктов, пока ваш лицензионный ключ активен. Ваш продукт будет продолжать работать, даже если срок действия вашего лицензионного ключа истечет. Вы можете обновить свой план, пока ваша лицензия активна, выполнив действия, описанные здесь.
 Годовое членство (неограниченное использование веб-сайта) 
 С годовым членством вы получаете доступ ко всем нашим плагинам, дочерним темам, макетам, значкам и 20% скидку на некоторые премиальные курсы Divi и WordPress. Участники получают обновления, премиальную поддержку, ранний доступ ко всем новым выпущенным продуктам, а также неограниченное использование на неограниченном количестве веб-сайтов. Ваша лицензия будет автоматически продлена, и будет выставлен счет на счет, который вы изначально использовали при покупке членства. Вы можете отключить автоматическое продление через Моя учетная запись> Подписки. Если лицензия не будет продлена, у вас больше не будет доступа к загрузкам продуктов, поддержке или обновлениям. Ваш продукт будет продолжать работать, даже если срок действия вашего лицензионного ключа истечет.Вы можете обновить годовое членство до бессрочного, пока ваша лицензия активна, выполнив действия, описанные здесь.
 Пожизненное членство (неограниченное использование веб-сайта) 
 С пожизненным членством вы получаете доступ ко всем нашим плагинам, дочерним темам, макетам, значкам и избранным курсам Divi и WordPress премиум-класса. Участники получают пожизненные обновления, пожизненную премиальную поддержку, ранний доступ ко всем выпущенным новым продуктам, а также неограниченное использование на неограниченном количестве веб-сайтов. Пожизненное членство не требует ежегодных взносов. Купите один раз и получите доступ к обновлениям продукта навсегда. Как только вы заплатите, вы будете перенаправлены на панель управления учетной записью, где сможете сразу получить доступ ко всем нашим (извините, вашим) премиум-продуктам.
 Подробнее о продукте 
  •  — Автоматические обновления
  •  — Премиум поддержка
 Документация 
 Следуйте нашей документации, чтобы встать на верный путь.Смотрите обучающие видео. Просмотрите статьи. Вдохновиться.
 Просмотр документации
 Опора 
 Наша команда преданных своему делу сотрудников службы поддержки всегда готова помочь! Вот несколько шагов, которые вы можете предпринять, чтобы ускорить процедуру устранения неполадок: перед обращением в службу поддержки.
 
 Открытый запрос поддержки
 Как легко добавлять значки в меню в WordPress — WordPress Tavern 
 Вы когда-нибудь хотели оживить меню навигации на своем сайте, добавив значки? Обычно вам нужно редактировать CSS темы, но благодаря новому плагину в этом нет необходимости.Menu Icons — это плагин для WordPress, который позволяет легко добавлять значки в меню, не касаясь кода.
 Создан с простотой в уме 
 Дзикри Азиз берет на себя большую часть работы по разработке и отвечает за первоначальную идею плагина. Азиз помог создать плагин, потому что большинство других решений включают редактирование классов CSS или другие сложные меры. «Большинство существующих плагинов заставляют вас вслепую назначать значки и заставляют вводить некоторые классы и / или разметку в пункты меню.Мне это показалось не очень удобным. Кроме того, я хотел научиться лучше работать с медиа-библиотекой, — сказал Азиз в интервью Tavern.
 После активации значков меню перейдите к  Внешний вид> Меню . Вы должны заметить новое мета-поле с левой стороны, обозначенное  Menu Icons Settings . Здесь вы можете выбрать, какие наборы значков доступны для выбора, а также настроить параметры размещения по умолчанию для каждого значка.
 Новое мета-поле слева со ссылкой для выбора значка справа
 Как видите, четыре самых популярных шрифта значков доступны по умолчанию.Параметр изображения позволяет вам использовать медиатеку WordPress для загрузки изображения или использовать уже доступное. Несмотря на то, что его нет в списке, иконки меню поддерживают пакеты шрифтов Fontello благодаря Джошуа Раунтри. Часто задаваемые вопросы о значках меню содержат информацию о том, как установить и выбрать значки Fontello.
 После щелчка по ссылке «Выбрать значок» в пункте меню отображается модальное окно со значками для выбора.
 Множество значков на выбор
 Когда значок выбран, в правой части модели представлены некоторые параметры для изменения его отображения.По умолчанию используются глобальные настройки.
 Настройки для изменения отображения значков
 Одна из моих любимых функций — возможность использовать значки из разных пакетов. Если в пакете нет значка, который вы ищете, скорее всего, он есть у одного из трех других. Чтобы найти нужные значки для меню, потребовалось всего пять минут. Без изменения настроек по умолчанию, вот как выглядели мои меню в интерфейсе сайта.
 Конечный результат
 Иконки становятся частью ссылки, как и текст, и плавно переходят в нее.Можете ли вы сказать, к каким пакетам принадлежат эти значки? Если значки не выглядят выровненными правильно, вам нужно переопределить стили в файле CSS темы или использовать плагин Simple Custom CSS для применения правильных атрибутов стиля. Однако в большинстве случаев значки должны хорошо выглядеть в вашей теме.
 Простой, но эффективный 
 Menu Icons — отличный и эффективный плагин. Хотел бы я, чтобы он существовал пять лет назад, когда я действительно мог бы его использовать. Это самый простой способ добавить значки в меню навигации в WordPress без необходимости редактировать CSS. Если знаете что-то попроще, дайте нам знать в комментариях. Кроме того, многие ли из вас планируют использовать это для клиентских проектов?
 Нравится: 
 Нравится Загрузка …
 Как добавить значки в формы WordPress (шаг за шагом) 
 Хотите добавить значки в свои формы? Значки могут быть отличным способом визуально усилить назначение поля и помочь вашим формам выглядеть более индивидуально.
 В этом руководстве мы обсудим, как добавлять значки из Font Awesome в формы.Font Awesome — отличный вариант, потому что их значки действуют как шрифт, а это означает, что они будут иметь тот же цвет и размер, что и другие шрифты на вашем сайте.
 Вот темы, которые мы рассмотрим в этом руководстве:
 Добавление Font Awesome на ваш сайт 
 Первый шаг — добавить на свой сайт библиотеку значков Font Awesome. Это можно сделать разными способами, от добавления кода в заголовок вашего сайта до установки плагина. Подробнее о каждом варианте читайте в руководстве WPBeginner по добавлению шрифтов для значков.
 Для простоты мы будем использовать метод плагина с Better Font Awesome.
 Better Font Awesome — это бесплатный плагин WordPress, который добавляет ресурсы, необходимые для использования значков Font Awesome на вашем сайте. Когда будете готовы, установите этот плагин.
 После того, как этот плагин будет установлен и активирован, вы готовы начать добавлять значки в свои формы!
 Поиск значка в Font Awesome 
 Теперь, когда у нас есть возможность использовать Font Awesome на нашем сайте, давайте посмотрим, как получить информацию для нужного значка в форме.
 Любой значок из библиотеки значков Font Awesome будет работать таким же образом, но в этом примере мы будем использовать их значок бумажного самолетика.
  Примечание.  Font Awesome предлагает как бесплатные, так и платные значки. Вы можете использовать левое меню на их сайте, чтобы легко фильтровать значки. Или щелкните эту ссылку, чтобы просмотреть только бесплатные значки.
 После открытия страницы значков нам потребуется значение Unicode. Он отображается сразу под названием значка. Юникод этого значка бумажного самолетика —  f1d8 .
 Отображение значков перед заголовками форм 
 Чтобы добавить значок перед заголовком нашей формы, нам нужно создать специальный CSS, который будет вставлять этот значок за нас. Этот CSS будет немного отличаться в зависимости от того, хотите ли вы, чтобы значок отображался перед заголовком всех WPForms на вашем сайте или только этой формы.
  Добавить значок ко всем заголовкам форм 
 CSS для отображения значка перед заголовками всех форм прост, потому что он может быть более общим.Вот код CSS, который вам понадобится:
div.wpforms-container-full .wpforms-form .wpforms-title: before {
    содержание: '\ f1d8'; / * Unicode для значка, обязательно сохраните кавычки и обратную косую черту * /
    семейство шрифтов: FontAwesome;
    поле справа: 10 пикселей; / * Расстояние между иконкой и заголовком * /
}
 
 Если вы проверите первую строку с содержанием  , вы заметите, что юникод включен после обратной косой черты ( \ ). Это значение можно заменить на Unicode для любого другого значка в библиотеке Font Awesome.
 Этот CSS также включает правое поле в 10 пикселей. Без этого не было бы разрыва между значком и заголовком формы. Это число можно изменить по своему желанию.
  Добавить значок к заголовку конкретной формы 
 Вместо того, чтобы добавлять один и тот же значок к заголовкам каждой формы на вашем сайте, вы можете использовать более конкретный CSS для нацеливания только на одну конкретную форму.
 Чтобы настроить таргетинг на одну форму, вам нужно найти уникальный идентификационный номер для вашей формы. Вы можете найти его, просмотрев шорткод, используемый для встраивания вашей формы, или открыв  WPForms »Все формы .Идентификационный номер для каждой формы отображается в шорткоде.
 Мы будем использовать этот идентификационный номер,  31 , чтобы сделать наш CSS более конкретным. Вот CSS, который добавит значок только перед заголовком этой единственной формы:
div. wpforms-container-full # wpforms-31 .wpforms-form .wpforms-title: before {
    содержание: '\ f1d8'; / * Unicode для значка, обязательно сохраните кавычки и косую черту * /
    семейство шрифтов: FontAwesome;
    поле справа: 10 пикселей; / * Расстояние между иконкой и заголовком * /
}
 
 Этот CSS почти точно такой же, как стиль, который изменит все формы на вашем сайте.Единственная разница в том, что мы добавили  # wpforms-31 , поэтому теперь этот стиль будет применяться только внутри этой формы.
 Для вашей собственной формы вам просто нужно изменить номер идентификатора формы и заменить Unicode на нужный значок, как описано в разделе выше.
 Отображение значков перед метками полей 
 Для отображения значка перед всеми метками полей требуется CSS, очень похожий на тот, который был описан выше для заголовков форм:
div.wpforms-container-full .wpforms-form .wpforms-field-label: before {
    содержание: '\ f1d8'; / * Unicode для значка, обязательно сохраните кавычки и косую черту * /
    семейство шрифтов: FontAwesome;
    поле справа: 10 пикселей; / * Расстояние между иконкой и заголовком * /
}
 
  Целевой ярлык одного поля 
 Возможно, вы не захотите, чтобы один и тот же значок отображался рядом с каждым полем. Чтобы настроить таргетинг только на одно поле, нам нужно сделать наш CSS более конкретным, указав уникальный идентификатор поля.
 Этот подход очень похож на таргетинг на заголовок одной формы, описанный выше.
 Сначала вам нужно щелкнуть правой кнопкой мыши по полю, на которое вы хотите настроить таргетинг, и выбрать  Inspect .
 Теперь ваш экран должен разделиться для отображения HTML со страницы. Убедитесь, что выделено все поле, на которое вы хотите настроить таргетинг (включая метку и поле ввода), затем найдите идентификатор.
 Для этого поля идентификатор —  wpforms-245-field_1-container .Вот как мы сделаем CSS метки значка специфичным только для этого единственного поля:
div.wpforms-container-full .wpforms-form # wpforms-245-field_1-container .wpforms-field-label: before {
    содержание: '\ f1d8'; / * Unicode для значка, обязательно сохраните кавычки и косую черту * /
    семейство шрифтов: FontAwesome;
    поле справа: 10 пикселей; / * Расстояние между иконкой и заголовком * /
}
 
 Если вы посмотрите эту первую строку CSS, вы заметите, что мы добавили символ «#», за которым следует только что найденный идентификатор. Теперь наш значок будет добавлен только к этому единственному полю, без изменения каких-либо других меток полей (в этой или любой другой форме).
 Отображение значков в полях HTML 
 Добавление значков в поля HTML — самый простой вариант, для которого не требуется настраиваемый CSS.
 Все, что вам нужно, это добавить простой шорткод в поле HTML. Например, вот шорткод, который нам понадобится для значка бумажного самолетика:
.
[icon name = "paper-plane"]
 
 Чтобы настроить это для другого значка, вам просто нужно скопировать имя со страницы определенного значка в Font Awesome.Название значка будет крупным шрифтом в верхней части страницы.
 Затем вы замените  бумажный самолетик  в шорткоде на имя значка, который вы хотите использовать.
 В поле HTML вы также можете добавить дополнительный текст и / или HTML вокруг шорткода значка, если хотите.
 Вот и все! Теперь вы можете добавлять значки в несколько мест в формах и даже настраивать таргетинг только на определенные формы или поля для добавления значка.
 Хотели бы вы еще больше оформить формы? Ознакомьтесь с нашей статьей о красивых дизайнах контактных форм, которые можно украсть (в ней рассказывается, как добавить значок к кнопке «Отправить»).
 Использование значков и векторов Icomoon в WordPress 
 Каждый веб-сайт, который вы посещаете, включает в себя сотни элементов, даже если это не так очевидно. Это означает изображения, текст, подзаголовки и, конечно же, значки. Однако использование тех же скучных значков, что и на любом другом сайте, может сделать ваш вид «резаком для печенья», поэтому важно искать универсальные варианты, такие как те, что есть в Icomoon.
 С помощью правильного набора значков вы можете сделать свой веб-сайт более профессиональным.В этой статье мы познакомим вас с популярными иконками, SVG и векторными инструментами, а также научим, как добавлять их элементы в WordPress. Более того, мы покажем вам, как использовать их с Divi.
 Поехали!
 
 Подпишитесь на наш канал Youtube
 Знакомство с иконками и векторами Icomoon 
 Icoomon — это сервис, который предоставляет вам доступ к тысячам бесплатных и премиальных уникальных значков и векторных изображений. Помимо самих значков, Icomoon также предлагает онлайн-приложение, которое позволяет вам создавать SVG и шрифты для элементов, которые вы хотите использовать на своем веб-сайте.
 На домашней странице Icomoon вы можете найти три разных набора значков. Есть сам Icomoon, Linearicons и Lindua. Icomoon и Linearicons предлагают бесплатные версии, каждая из которых включает сотни элементов, тогда как Lindua — это пакет только премиум-класса.
 Icomoon предлагает три различных набора значков. Существует бесплатная версия, которая поддерживает форматы SVG, PDF, EPS, Ai и PSD, а также PNG различных размеров. В расширенных премиум-планах больше значков и параметров настройки.Однако, по нашему опыту, для большинства пользователей уровень бесплатного Icomoon вполне достаточен.
 Однако имейте в виду, что для использования этих значков вам необходимо заранее интегрировать их с WordPress. Не волнуйтесь, мы поговорим об этом в следующем разделе.
  Основные характеристики уровня бесплатного пользования Icomon: 
  •  Доступ почти к 500 иконкам.
  •  Вы можете экспортировать значки в несколько форматов, включая SVG, TTF, PDF, EPS, Ai и PSD.
  •  PNG доступны в нескольких размерах.
  Цена:  Icomon предлагает бесплатный пакет, а также два уровня премиум-класса по цене от 39 долларов за одну лицензию | Дополнительная информация
 Как добавить значки и векторы Icomoon в WordPress 
 Есть два способа добавить элементы Icomoon в WordPress. Первый подход предполагает использование веб-приложения Icomoon, которое позволяет вам выбирать значки, которые вы хотите использовать, и экспортировать их как SVG:
 Для этого вы можете выбрать значки, как показано в приведенном выше примере, и нажать кнопку  Generate SVG & More  внизу страницы:
 Icomoon затем сгенерирует . zip , включая SVG для выбранных значков. Вы можете скачать файл, нажав соответствующую кнопку внизу следующей страницы:
 Теперь все, что осталось, — это загрузить файлы SVG, которые вы хотите использовать, в WordPress и вставить их в качестве носителя. Если вы еще не включили поддержку SVG в WordPress, ознакомьтесь с этим руководством, которое мы ранее писали о том, как это сделать.
 Второй способ использования значков Icomoon предполагает использование плагина. Есть несколько удобных опций, которые позволяют импортировать пакеты значков в WordPress — выдающийся вариант — WP SVG Icons:
 Этот конкретный плагин позволяет получить доступ к каждому элементу Icomoon в бесплатном пакете после активации.После включения вы сможете увидеть все значки Icomoon на вкладке «Иконки WP SVG» на панели инструментов WordPress:
 Выбор значка покажет вам, какой шорткод использовать в разделе  Shortcode , показанном выше. Если вы присмотритесь, то заметите, что плагин упоминает кнопку  Insert Icon  в редакторе. Однако эта функция еще не работает с редактором блоков, поэтому вам пока придется полагаться на короткие коды.
 Чтобы добавить любой значок на свои страницы или в сообщение, откройте редактор и добавьте виджет Shortcode.Вставьте в него шорткод, который вы скопировали ранее:
 Вот и все! Теперь, когда вы просматриваете страницу или сообщение, значок Icomoon будет отображаться там, где вы его разместили. Проблема в том, что редактор блоков часто не позволяет нам размещать элементы в очень точных местах, и именно здесь на помощь приходит Divi.
 Интеграция значков и векторных изображений Icomoon с Divi 
 Добавление векторов Icomoon с помощью Divi работает так же, как и без него. Другими словами, вам все равно придется полагаться на короткие коды, которые плагин WP SVG Icons генерирует для вас.Чтобы добавить их, вы просто используете модуль кода Divi:
 После того, как вы сохраните изменения в модуле, все готово. Основное отличие Divi заключается в том, что вы получаете гораздо лучший контроль над своей страницей и макетами сообщений. Это означает, что вы можете разместить значки Icomoon практически везде, где захотите, без необходимости возиться с CSS (если вы не мастер кодирования!).
 По нашему опыту, лучше всего использовать такие значки вместе с модулем Blurb Divi. Это позволяет размещать значки поверх ваших объявлений и дополнять собственную коллекцию Divi, которая уже включает множество вариантов значков.
 Заключение 
 Нет недостатка в бесплатных наборах иконок, которые можно использовать на своем веб-сайте. Однако лучший подход — придерживаться высококачественных опций, которые, как вы знаете, хорошо работают с WordPress — и, конечно же, с Divi. Icomoon — один из таких инструментов, он включает сотни иконок, SVG и векторов, которые вы можете использовать на своем веб-сайте.
 Самый простой способ использовать значки и векторы Icomoon в WordPress — это использовать такой плагин, как WP SVG Icons. С его помощью вы сможете создавать короткие коды, которые можно использовать как с редактором блоков, так и с Divi, так что это беспроигрышный вариант.
  У вас есть вопросы о том, как добавить пользовательские значки в Divi? Давайте поговорим о них в разделе комментариев ниже! 
  Миниатюра статьи изображение StockVector / shutterstock.com 
 Добавление иконок социальных сетей на ваш сайт WordPress 
 Социальные сети — это область, которая резко выросла за последнее десятилетие до такой степени, что отсутствие присутствия в Интернете может негативно повлиять на ваш бизнес. Недостаточно просто запустить веб-сайт — вам также необходимо убедиться, что он интегрирован с вашими учетными записями в социальных сетях.
 Вы можете многое сделать, чтобы направить посетителей с вашего сайта на ваши каналы в социальных сетях. Однако лучший подход для пользователей WordPress — установить один или два специальных плагина. Имея на выбор тысячи вариантов — как бесплатных, так и премиум-класса, — должно быть легко найти решение, соответствующее вашим потребностям.
 В этом посте будет рассказано, как добавить значки социальных сетей на ваш сайт, а также будет собрано несколько плагинов, которые могут вам помочь. Давайте начнем!
 Как добавить значки социальных сетей в заголовок WordPress 
 Прежде чем мы начнем, стоит отметить, что вы можете добавить значки социальных сетей в заголовок своего веб-сайта с помощью одного из плагинов, о котором мы поговорим позже.Однако часто есть более простой способ сделать это, не требуя установки каких-либо дополнительных инструментов.
 Первое, где вы должны найти решение, — это ваша текущая тема. Многие темы включают опции для добавления значков социальных сетей на ваш сайт, а также позволяют выбрать область отображения:
 Если ваша тема не предлагает этот параметр, вы можете следовать тремя путями. Вы можете использовать плагин (опять же, мы рассмотрим наши основные варианты позже), отредактировать текущую тему или выбрать новую тему.Если вы выберете второе, вам нужно будет искать что-то гибкое, но хорошо подходящее для вашей ниши.
 Для разработчиков Genesis Framework — отличный вариант. С другой стороны, не кодировщикам понравится простота использования многоцелевой темы, такой как Avada или Divi. Все три позволят вам легко разместить значки социальных сетей в разделе заголовка вашего сайта.
 Как добавить значки социальных сетей в меню в WordPress 
 Наряду с заголовком вы также можете добавить значки социальных сетей в меню WordPress.Это разумная идея, поскольку меню хорошо видны всем посетителям вашего сайта.
 Как и ваш заголовок, ваша текущая тема может позволить вам связываться с вашими учетными записями в социальных сетях из вашего меню. Многие темы включают это как стандартную функцию, включая параметры по умолчанию, такие как Twenty Fifteen:
.
 Если вам нужно добавить пользовательские значки социальных сетей в тему, которая не поддерживает эту функцию, вы можете предпринять несколько простых шагов. Вам понадобится библиотека иконок Font Awesome и:
  1.  Создайте дочернюю тему, чтобы сохранить изменения.
  2.  Активируйте Font Awesome с помощью файла functions.php вашей темы.
  3.  Добавьте классы CSS в меню навигации, используя экран «Внешний вид»> «Меню» в WordPress.
  4.  При необходимости измените стиль значков, используя файл style.css вашей темы.
 Конечно, для тех, у кого нет большого технического опыта, этот процесс может быть немного сложным. Итак, давайте посмотрим на подборку плагинов WordPress, которые могут делать то же самое.
 Плагины социальных сетей для WordPress 
 Как вы видели, существуют различные методы добавления значков социальных сетей в WordPress.Однако практически все они бледнеют по сравнению с использованием подходящего плагина.
 В конце концов, плагины обычно позволяют детальную настройку, их намного проще использовать, чем ручные методы. Давайте взглянем на несколько инструментов, которые вы можете попробовать.
 Easy Social Share Buttons для WordPress 
 Во-первых, Easy Social Share Buttons для WordPress — одно из лучших доступных решений премиум-класса для добавления значков социальных сетей на ваш сайт WordPress. Это невероятно всеобъемлющий инструмент — возможно, он является лидером по сравнению со своими конкурентами.
 Этот плагин включает параметры для добавления значков социальных сетей во многие места вашего веб-сайта, в том числе с помощью всплывающих окон, плавающих «липких» полос и многого другого. Существует также множество анимаций и стилей значков на выбор, а также набор дополнительных функций.
 Easy Social Share Buttons для WordPress доступен за 20 долларов на CodeCanyon и должен быть одним из первых в вашем списке кандидатов.
 Иконки социальных сетей Jetpack 
 Jetpack — это идеальное решение для многих пользователей WordPress благодаря модульному подходу к реализации функциональности сайта.К тому же это бесплатно! Модуль Jetpack Social Media Icons — это простой способ убедиться, что посетители могут найти ваши различные каналы, независимо от того, где они в настоящее время просматривают на вашем сайте.
 Вместо того, чтобы добавлять значки в заголовок и меню, этот плагин позволяет отображать ваши учетные записи в социальных сетях на боковых панелях вашего сайта. Это разумная стратегия, поскольку она позволяет держать эти значки на видном месте.
 Поддерживаются только несколько основных каналов, но каждый из них легко настроить. Обычно вам достаточно указать имя пользователя.Кроме того, в сочетании с другим модулем — Custom CSS — вы также можете выполнять базовую настройку своих значков.
 Простая коробка для авторов 
 И последнее, но не менее важное: бесплатный плагин Simple Author Box делает именно то, что написано на упаковке. Он позволяет вам добавить поле на свой сайт, которое включает ваш Gravatar, имя, веб-сайт и другую ключевую информацию, включая значки социальных сетей.
 Это отличное решение для блогов, ориентированных на авторов. Поле автора будет отображаться в конце каждого сообщения, и есть возможность добавить его в свой собственный сингл .php  или  author.php  шаблонов. Эта коробка также полностью настраивается и отлично смотрится на небольших устройствах.
 Что касается каналов, которые вы можете продемонстрировать, их более 30 на выбор. Это означает, что независимо от того, какие сайты социальных сетей вы используете в настоящее время, на нем должен быть значок, соответствующий вашим потребностям.
 Получите поддержку по более распространенным вопросам WordPress от WP Engine 
 Чтобы добиться успеха в социальных сетях, нужно потрудиться, как и создание оптимизированного веб-сайта.Вот где сочетание WP Engine с инструментом автоматизации социальных сетей, таким как Social Media Suite, может помочь вам активизировать ваши усилия в социальных сетях.
 Чтобы помочь вам, WP Engine предлагает отличную надежность и надежную команду поддержки. Наш специализированный ресурсный центр подтверждает это. Он полон полезных повседневных советов, которые помогут пользователям WordPress, когда они больше всего в этом нуждаются. Проверьте это сегодня!
 Как добавить значки социальных сетей в меню WordPress? (Шаг за шагом) 
 Независимо от того, ведете ли вы свой бизнес или личный сайт, вы должны убедиться, что пользователи могут делиться вашим контентом в социальных сетях. Вот почему в этом посте мы покажем вам , как добавить значки социальных сетей в меню  WordPress.
 Зачем добавлять значки социальных сетей в меню WordPress? 
 Согласно последним исследованиям, почти 50% населения мира использует хотя бы одну социальную сеть. Подключение вашего сайта к Facebook или добавление ленты Instagram на ваш сайт — хорошие варианты, но вы можете сделать еще кое-что, чтобы расширить свое присутствие в социальных сетях.
 Меню — один из самых заметных элементов на вашем сайте.Кроме того, это одна из первых вещей, которую видят пользователи, посещая ваш сайт. Например, взгляните на главное меню нашего веб-сайта.
 Итак, чтобы настроить свой сайт и максимально использовать каналы социальных сетей, вы можете добавить значки социальных сетей в свое меню WordPress. Кроме того, вы можете отображать значки в других областях своего сайта, которые поддерживают виджеты, такие как нижний колонтитул, боковая панель и т. Д.
 Несмотря на то, что некоторые темы, такие как Divi, включают некоторые параметры для добавления значков социальных сетей в меню, большинство тем не имеют этой функции.Кроме того, WordPress не имеет встроенной функции для включения значков в меню. Итак, в этом посте мы покажем вам  три метода простого добавления значков социальных сетей в меню  WordPress.
 Как добавить значки социальных сетей в меню WordPress? 
 Есть три основных способа добавить значки социальных сетей в меню WordPress:
  1.  С плагинами
    1.  QuadMenu
    2.  Социальные иконки WP
  2.  Из настройщика темы
  3.  Использование значков FontAwesome вручную
 В этом руководстве мы шаг за шагом опишем каждый метод, чтобы вы могли выбрать тот, который вам больше всего нравится.
 1) Плагины 
 Использование плагинов — самый простой способ включить значки социальных сетей в ваше меню. Есть несколько вариантов, поэтому, чтобы облегчить вашу жизнь, мы перечислили два лучших плагина, которые вы можете использовать.
 1.1) QuadMenu 
 QuadMenu — лучший инструмент для простой настройки и вывода меню WordPress на новый уровень. Это плагин freemium. Существует бесплатная версия с базовыми функциями и три плана премиум-класса с расширенными функциями и приоритетной поддержкой.
 Чтобы добавить в меню значки социальных сетей, вам потребуется премиум-версия. Итак, давайте посмотрим, как установить его и активировать плагин на своем сайте.
 Установка и активация 
 Во-первых, вам необходимо приобрести плагин и загрузить файлы на свой рабочий стол. Затем перед его установкой вам необходимо установить бесплатную версию на свой сайт. Для этого перейдите на панель управления  WP> Плагины> Добавить новый . Затем используйте панель поиска и найдите QuadMenu.После этого нажмите  Установить , а затем  Активировать .
 После активации используйте файлы премиум-версии, которые вы скачали ранее, и установите их на свой сайт.
 После активации плагина вам необходимо будет подтвердить свой лицензионный ключ. На панели управления вашей учетной записи QuadMenu вы увидите вариант лицензий.
 Скопируйте ключ оттуда и вставьте его в поле лицензий со своим зарегистрированным адресом электронной почты, чтобы подтвердить свой ключ.
 Плагин доступен в нашем магазине, на Envato и на торговой площадке Elegant, поэтому используйте раскрывающееся меню, чтобы выбрать подходящий вариант для вашей покупки. После проверки все готово.
 Добавьте значки социальных сетей в меню WordPress с помощью QuadMenu 
 QuadMenu работает с любой бесплатной или премиальной темой. Для этой демонстрации мы собираемся использовать GeneratePress, но процесс аналогичен любой другой теме.
 Во-первых, давайте перейдем к настройкам плагина, выбрав  QuadMenu> Options .
 Здесь вы увидите несколько вариантов настройки, например:
  •  Главное меню
  •  Адаптивный
  •  Тема по умолчанию
  •  Настроить
  •  Социальные сети
  •  Импорт / Экспорт
 Настройка параметров социальных сетей 
 В нашем случае нам нужно добавить значки социальных сетей в наше основное меню. Итак, выберем вариант  Social .
 Вы увидите несколько параметров по умолчанию, которые вы можете редактировать или удалять в зависимости от имеющихся у вас каналов.Они уже назначили значки с профилями в социальных сетях. Однако вы также можете настроить их, нажав кнопку  + Добавить значок . Кроме того, вы можете добавить новые каналы социальных сетей, нажав кнопку  + .
 Допустим, вы хотите изменить значок Facebook. Нажмите  + Добавить значок , и вы увидите всплывающее окно с множеством значков, которые вы можете выбрать.
 Есть много значков, поэтому мы рекомендуем вам использовать функцию поиска для фильтрации результатов.
 Как видите, мы провели поиск значков Facebook. Он покажет вам все доступные значки, связанные с вашим поисковым запросом, поэтому выберите тот, который вам нравится, и сохраните его.
 Вы также можете изменить заголовки и URL-адреса. После внесения всех необходимых изменений в QuadMenu сохраните настройки.
 После этого перейдите в меню WordPress. Там вы увидите все доступные меню. Чтобы использовать параметры QuadMenu в вашем меню, вам необходимо отметить его как  QuadMenu Dev  в настройках меню  .После этого сохраните меню.
 При загрузке следующей страницы вы увидите параметры QuadMenu.
 Под элементами QuadMenu вы увидите список значков  Social . Выберите их и нажмите  Добавить в меню .
 После этого вы увидите раздел «Социальные сети» под опциями главного меню. Наведите указатель мыши на курсор, и вы увидите параметры настройки QuadMenu.
 Если вам нужна дополнительная настройка, выберите этот вариант.В противном случае нажмите кнопку  Save Menu , и все готово.
 Иконки в меню (Frontend) 
 А теперь пора проверить результаты. Итак, перейдите на главную страницу своего сайта, и вы увидите значки социальных сетей. И когда вы наведете на них курсор, появятся значки.
 Вот и все! Вы успешно добавили  значков социальных сетей в меню WordPress с помощью QuadMenu .
 1.2) Значки меню WP 
 Если вы не можете позволить себе премиум-плагины, не волнуйтесь.У нас есть для вас бесплатное решение.
 В этом разделе мы покажем вам, как добавить значки социальных сетей в ваш WordPress с помощью бесплатного плагина под названием WP Menu Icons.
 Установка и активация 
 Сначала установите и активируйте значки меню WP на своем сайте.
 Этот инструмент очень прост в использовании и не требует дополнительной настройки.
 Настройка значков меню 
 Если на вашем сайте нет меню, вы можете создать его в разделе конфигурации.
 Назначьте место вашему меню, и тогда вы готовы добавлять в него элементы.
 Чтобы добавить свои профили в социальных сетях в меню, выберите пункт  Custom Links . Вам нужно будет ввести URL-адрес страницы, на которую вы хотите создать ссылку, и метку. Затем нажмите  Добавить в меню .
 После добавления значка в меню страница конфигурации будет выглядеть следующим образом.
 Точно так же вы можете добавить другие значки социальных сетей.В данном случае мы добавили в наше меню значки Twitter, Pinterest и Instagram.
 В пунктах меню есть кнопка  + . Это параметр, который необходимо использовать для добавления значков в пункты меню, поэтому щелкните его.
 Затем вы увидите большой выбор предметов на выбор.
 Есть десятки значков, поэтому используйте функцию поиска, чтобы отфильтровать нужные результаты. В данном случае мы выбрали пункт меню Facebook, поэтому будем искать значок Facebook.
 После выбора того, что вам нравится, вы увидите настройки значка в правом столбце. Здесь вы можете отобразить или скрыть метку, настроить положение, размер и выравнивание. В этом случае мы собираемся скрыть ярлык. После того, как вы закончите настройку, нажмите  Сохранить .
 Таким же образом можно настроить значки Pinterest, Twitter и Instagram. После добавления необходимых значков сохраните меню.
 А теперь пора проверить результат.Перейдите на интерфейс вашего сайта, и вы увидите новые значки.
 Вот как вы можете  добавить значки социальных сетей в свои меню в WordPress с помощью значков меню WP . Наконец, вы также можете стилизовать свои значки на странице настроек значков меню WP.
 2) Настройка темы 
 Если вы не хотите устанавливать какие-либо плагины, вы можете добавить значки социальных сетей в свои меню с помощью настройщика тем. Некоторые премиальные темы, такие как Divi, Newspaper или Avada, поставляются со встроенными панелями тем, которые позволяют настраивать тему и добавлять значки социальных сетей.
 Для нашей демонстрации мы будем использовать тему Divi от Elegant Themes.
 Сначала перейдите на панель управления  WP> Внешний вид> Настроить .
 Затем перейдите к настройке заголовка и элементам заголовка. Там вы увидите возможность включить значки социальных сетей в заголовках.
 Включите эту опцию, и тогда вы увидите ее в заголовке вашего сайта.
 Кроме того, вы можете настроить их, перейдя в  Divi> Параметры темы .
 Здесь вы можете включить нужные значки и ввести URL-адрес ваших профилей в социальных сетях. По умолчанию значки социальных сетей будут отображаться как в верхнем, так и в нижнем колонтитуле вашего сайта.
 Однако вы можете скрыть их в настройках настройщика.
 Другие темы, такие как Newspaper и Newsmag, имеют свои собственные параметры настройки, поэтому вы можете включать / отключать значки и отображать их прямо через специальную панель тем. Если вы не можете найти раздел значков социальных сетей в настройщике темы или на панели, не стесняйтесь оставлять комментарий ниже, и мы постараемся вам помочь.
 3) Использование FontAwesome 
 Наконец, вы можете вручную добавлять значки социальных сетей в свои меню в WordPress. Даже если вы не разработчик или не обладаете навыками программирования, вы можете отображать значки социальных сетей с помощью небольшого кода HTML. Для этого мы будем использовать значки FontAwesome.
 Итак, первое, что вам нужно сделать, это зайти на сайт FontAwesome.
 Используйте функцию поиска, чтобы найти нужные значки. Для этой демонстрации мы будем искать   значков Twitter  .
 На следующей странице сайт покажет вам результаты поиска. Выберите тот, который вам больше нравится.
 На следующей странице вы увидите подробную информацию о выбранном значке, поэтому просто скопируйте HTML-код значка.
 Добавление отличных иконок со шрифтами в WordPress 
 Затем перейдите в раздел меню на своем сайте WordPress. Слева вы увидите раздел настраиваемых ссылок. Вам нужно будет ввести URL-адрес своего профиля в Twitter и вставить HTML-код, который вы только что скопировали, в поле  Link Text . После этого нажмите  Добавить в меню .
 После этого сохраните изменения. Затем перейдите в интерфейс своего сайта, и вы увидите значок.
 Таким образом, вы сможете  добавить любой значок социальной сети в свое меню .
 HTML-код не работает 
 Если вы выполнили все шаги этого руководства, но HTML не работает, попробуйте следующее.Если код  fab  не работает, попробуйте изменить HTML-код, удалив  b  из  fab . Так, например, в нашем случае окончательный HTML-код будет выглядеть так:     вместо    .
 Пример:
 Заключение 
 В целом, добавление значков социальных сетей в меню WordPress — отличный способ повысить ваше присутствие в социальных сетях. В этом руководстве мы рассмотрели 3 разных способа сделать это:
  1.  С плагинами
  2.  Из настройщика темы
  3.  Вручную
 Если ваша тема позволяет добавлять значки по умолчанию, вам не нужно использовать какие-либо дополнительные плагины или HTML-код. Если вы предпочитаете плагин, мы рекомендуем использовать QuadMenu. Это позволит вам получить полный контроль над настройкой всего меню WordPress, а также содержит множество мощных функций. Однако, если вы предпочитаете бесплатное решение, взгляните на значки меню WP.Это простой инструмент, который поможет вам быстро добавить значки социальных сетей.
 С другой стороны, если вы не хотите устанавливать какой-либо плагин, вы можете добавить значки социальных сетей, используя немного HTML и значки FontAwesome. Эта опция также позволяет вам настроить значки с помощью небольшого количества CSS или вы можете избежать части стилизации и использовать значки по умолчанию.
 Вы нашли эту статью полезной? Если да, оставьте нам комментарий ниже и поделитесь этим сообщением в социальных сетях.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *