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

Stacy Martin Январь 16, 2015

Rating: 5.0/5. From 1 vote.

Please wait...

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

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

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

Нажмите F12 на клавиатуре или нажмите правой кнопкой мыши на иконке, которую вы собираетесь заменить и выберите вариант Проинспектировать элемент (Inspect Element) для того, чтобы открыть инструмент инспектирования Firebug в вашем браузере.
Наведите курсор на иконку, которую вы собираетесь заменить для того, чтобы определить в каком файле и на какой строке содержится код этой иконки:
Загрузите изображение в папку sites/all/themes/themeXXX/images на сервере, где themeXXX — это название вашей темы:
Откройте нужный файл с помощью Dreamweaver или Блокнота (Notepad) на сервере, и найдите там строку с таким кодом:
```
a.tm-follow-link-facebook:before {
	content: "\f0d5";
}
```
Замените его на:
```
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» исходя из размеров вашего изображения.
Вы можете воспользоваться этой инструкцией Как создать CSS класс для шаблонов WordPress, Drupal и Joomla для того, чтобы изучить способ работы с инструментом Инспектирования элемента (Inspect Element).
В некоторых случаях надо будет добавить такие свойства CSS, как top/left или bottom/right для того, чтобы выровнять изображение.
Сохраните изменения в обновленном файле и загрузите его на сервер. Замените существующий файл обновленным:
Обновите страницу сочетанием горячих клавиш Control+F5/Command+R: