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.

Поехали!