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

Из этого туториала вы узнаете, как заменить иконки FontAwesome изображениями в Drupal 7.

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

Иконки FontAwesome можно заменить изображениями в файлах CSS:

1. Нажмите F12 на клавиатуре или нажмите правой кнопкой мыши на иконке, которую вы собираетесь заменить и выберите вариант Проинспектировать элемент (Inspect Element) для того, чтобы открыть инструмент инспектирования Firebug в вашем браузере.

2. Наведите курсор на иконку, которую вы собираетесь заменить для того, чтобы определить в каком файле и на какой строке содержится код этой иконки:

   

3. Загрузите изображение в папку sites/all/themes/themeXXX/images на сервере, где themeXXX — это название вашей темы:

   

4. Откройте нужный файл с помощью Dreamweaver или Блокнота (Notepad) на сервере, и найдите там строку с таким кодом:

   ?

   1 2 3

   a.tm-follow-link-facebook:before {     content: "\f0d5"; }

   Замените его на:

   ?

   1 2 3 4 5 6 7

   a.tm-follow-link-facebook:before {     background: url("http://yourwebsite.com/sites/all/themes/themeXXX/images/facebook.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);     content: "";     height: 43px;     position: absolute;     width: 43px; }

   Пожалуйста, замените http://yourwebsite.com/sites/all/themes/themeXXX/images/facebook.png на путь к вашему изображению и, соответственно, измените название файла. Также вам надо будет изменить параметры «height» и «width» исходя из размеров вашего изображения.

5. Вы можете воспользоваться этой инструкцией Как создать CSS класс для шаблонов WordPress, Drupal и Joomla для того, чтобы изучить способ работы с инструментом Инспектирования элемента (Inspect Element).

6. В некоторых случаях надо будет добавить такие свойства CSS, как top/left или bottom/right для того, чтобы выровнять изображение.

7. Сохраните изменения в обновленном файле и загрузите его на сервер. Замените существующий файл обновленным:

   

8. Обновите страницу сочетанием горячих клавиш Control+F5/Command+R:

   

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

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