Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

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

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

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

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

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

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

    Drupal7.Replace iconic font with image-1

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

    Drupal7.Replace iconic font with image-2

  4. Откройте нужный файл с помощью 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» исходя из размеров вашего изображения.

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

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

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

    Drupal7.Replace iconic font with image-3

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

    Drupal7.Replace iconic font with image-4

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

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

 
Чат
Мы поможем вам выбрать правильный продукт или поможем с Вашим шаблоном.