WordPress. Как менять иконки FontAwesome

Ryan DeWitt Октябрь 29, 2013

Rating: 5.0/5. From 2 votes.

Please wait...

Из этого туториала вы узнаете, как менять иконки Font Awesome в шаблонах WordPress.

WordPress. Как менять иконки FontAwesome

Давайте поменяем иконки из описания поста. Эти иконки отображаются с использованием шрифта Font Awesome.
Проверьте иконку с помощью программного обеспечения для разработчиков Firebug. Вы можете найти более подробную информацию о том, как использовать Firebug здесь. В нашем случае это класс "icon-bookmark" . Этот код отображается в <div class="post_category">.
Теперь надо переписать код оригинальной иконки с помощью CSS. Откройте файл themeXXXXX/style.css в вашем редакторе (здесь XXXXXX — это номер темы шаблона).
Надо создать селектор CSS, что перепишет код оригинальной иконки. Скопируйте название нужного класса, его можно определить, используя Firebug. В нашем примере это post_category.
Вставьте название класса в CSS файл и добавьте символ . (точка), чтобы создать селектор CSS.
Скопируйте код иконки. Его можно определить с помощью Firebug.
Вставьте код в файл .css. Ваш селектор CSS должен выглядеть, как и представленный на скриншоте:
Теперь надо специфицировать код иконки в файле style.css. В Firebug мы видим ссылку на внешний файл CSS. Этот файл используется иконками Font awesome.

Внимание: r=3.2.1, означает, что в шаблоне используются иконки Font awesome версии 3.2.1. Убедитесь, что указываете коды для иконок из правильной версии шрифта. В противоположном случае, они могут не появится на сайте.
Вы можете воспользоваться поисковиком для того, чтобы найти список иконок Font Awesome подходящей версии. Воспользуйтесь поиском по следующим ключевым словам:
font awesome 3.2.1 cheatsheet. Пожалуйста, обратите внимание, что 3.2.1 — это версия иконок Font awesome (в вашем шаблоне эта версия может быть другой). Откройте ссылку для «font Awesome 3.2.1 Cheatsheet».
Здесь вы увидите список иконок и их коды. Давайте заменим нашу иконку на icon-warning-sign. Скопируйте код этой иконки. Он должен выглядеть, как f071.
Вставьте этот код в ваше правило CSS со знаком обратного слэша в начале. Добавьте !important, чтобы убедится, что оригинальные стили будут переписаны. В нашем случае измененный код выглядит, как на скриншоте:
Сохраните изменения и загрузите отредактированный файл на сервер. Обновите страницу, чтобы увидеть внесенные изменения.
Как вы видите, правило для оригинальной иконки было переписано в файле style.css. Пожалуйста, сделайте такие же изменения и для других иконок.