Виджет кнопки соцсетей плагин WordPress Social Icons Widget. Wordpress иконки соц сетей

WordPress. Как добавить значки для ссылок на социальные сети (если они представлены текстом)

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

WordPress. Как добавить значки для ссылок на социальные сети (если они представлены текстом)

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

wordpress_how_to_add_an_icons_for_social_links_1

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

Для того чтобы добавить значки для ссылок на социальные сети вашего сайта WordPress, следуйте таким инструкциям:

Добавление значков FontAwesome:

Во-первых, Вам нужно добавить значки. Это можно сделать при помощи правил css. Для того чтобы добавить правила, войдите в вашу админ панель WordPress и перейдите на вкладку Внешний вид (Appearance) -> Редактор (Editor). Откройте файл style.css и прокрутите в конец файла.
Вам нужно создать правила, в которых используются селекторы названий ссылок на социальные сети и css-элемент ::before. Правила должны выглядеть следующим образом:
[title="facebook"]::before { content: "" !important; font-family: FontAwesome !important; font-size: 40px !important; }
В » » свойства content: Вам нужно вставить значок FontAwesome. Для того чтобы это сделать, Вам нужно найти, скопировать и вставить значок из Списка значков FontAwesome 3.2.1 в » «. (Обратите внимание, что Вам нужно скопировать сам значок, а не код для него):

В этом правиле Вы можете также задать размер шрифта для значков. Например, мы задали размер шрифта — 40px при помощи свойства css font-size: 40px !important;.
Теперь Вам нужно создать правила для остальных ссылок на социальные сети, которые используются в шаблоне. Скопируйте и вставьте правило столько раз, сколько нужно, и измените название ссылки на социальные сети в селекторе [title=»facebook»]. Затем, скопируйте и вставьте нужные значки из Списка значков FontAwesome 3.2.1 в content: «» !important;. В результате, правила будут выглядеть следующим образом:
[title="twitter"]::before { content: "" !important; font-family: FontAwesome !important; font-size: 40px !important; } [title="instagram"]::before { content: "" !important; font-family: FontAwesome !important; font-size: 0px !important; } [title="google"]::before { content: "" !important; font-family: FontAwesome !important; font-size: 40px !important; }
Закончив редактирование правил, нажмите на кнопку Обновить файл (Update File), для того чтобы сохранить изменения:

Удаление текста социальных ссылок

Откройте файл static-social-networks.php во вкладке Внешний вид (Appearance) -> Редактор (Editor) в вашей админ

www.templatemonster.com