WordPress. Как заменить иконки FontAwesome изображениями

Этот туториал покажет, как заменить иконки FontAwesome картинками.

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

1. Войдите в админ панель WordPress:

   

2. Перейдите в меню ‘Медиа’ (‘Media’), кликните ‘Добавить новый’ (‘Add New’), чтобы добавить картинку:

   

3. Загрузите картинку, затем кликните ‘редактировать’ (‘edit’), чтобы получить прямую ссылку на данную картинку:

   

4. Скопируйте ссылку на картинку:

   

5. Проинспектируйте иконку с помощью дополнения Firebug (вы также можете воспользоваться туториалом, который покажет, как пользоваться дополнением Firebug). Вы увидите подобное CSS правило:

   .icon-star:before {
   content: "?";
   }

   

6. Отредактируйте данное правило следующим образом:

   .icon-star:before {
   content: url("http://template-test.com/elina/wordpress/wp-content/uploads/2014/09/icons_star1.gif") !important;} 

   где "http://template-test.com/elina/wordpress/wp-content/uploads/2014/09/icons_star1.gif" является прямой ссылкой на загруженную картинку и !important позволяет перезаписать старое правило. Скопируйте отредактированноe CSS правило:

   

7. В админ панели перейдите в меню Дизайн -> Редактор (Appearance -> Editor). Откройте файл ‘style.css’ используемой темы. Вставьте скопированное правило в конец файл ‘style.css’. Нажмите кнопку "Обновить файл" ("Update File"):

   

8. Обновите страницу сайта. Теперь вы можете видеть вашу картину вместо иконки FontAwesome:

   

Вы также можете воспользоваться детальным видео туториалом:

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