Joomla 3.x. Как изменить значок логотипа (если логотип задан как значок Font Awesome)

Добрый день! Из этого туториала Вы узнаете, как изменить значок логотипа в шаблонах Joomla (если он задан как значок Font Awesome).

Возможно, логотип вашего шаблона Joomla задан как значок иконического шрифта, а не как изображение:

Давайте узнаем, как изменить этот значок.

Как Вы можете видеть, логотип состоит из двух частей — значка и текста логотипа.

Используйте расширение Firebug для Firefox или Инструмент разработчика вашего любимого браузера, для того чтобы исследовать логотип:

Как Вы можете видеть, за текст логотипа отвечает модуль с ID: 205 — Модуль «Отдельная запись» (Single Article Module). Это означает то, что в вашей админ панели есть запись, в которой Вы можете изменить текст логотипа.

Сейчас Вы узнаете, как изменить текст логотипа.

Войдите в вашу админ панель Joomla.

1. Перейдите на вкладку Материалы -> Менеджер материалов (Content ->Article Manager):

   

2. Используйте сочетание клавиш CTRL+F/CMND+F (Windows OS/Mac OS), для того чтобы найти запись «logo».

3. Затем, нажмите на название записи, для того чтобы открыть её для редактирования. Вы увидите текст логотипа в открывшемся окне редактора записи:

   

4. Измените текст логотипа на нужный Вам и нажмите на зелёную кнопку «Сохранить» (Save) в левом верхнем углу экрана:

   

Вы успешно изменили текст логотипа. Теперь давайте изменим значок.

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

Значок логотипа добавлен при помощи следующего свойства CSS (в файле template.css):

content: "\f030";

Замените код значка на нужный Вам из списка значков Font Awesome:

Если Вы хотите заменить значок на пользовательское изображение/значок, замените вышеупомянутое свойство CSS следующим:

content: url("FULL_PATH_TO_YOUR_IMAGE_GOES_HERE");

Где текст FULL_PATH_TO_YOUR_IMAGE_GOES_HERE — это прямой путь к нужному изображению на сервере, например, http://yoursite.com/joomla/images/logo-image.png

Вы можете также изменить цвет фона красного кружка, изменив следующее свойство CSS:

border-color: #e74c3c;

Убедитесь, что Вы сохранили файл template.css, после того как Вы закончили редактирование. Обновите страницу для просмотра изменений.

Вы можете убедиться, что значок был успешно изменён:

Это конец донного туториала. Теперь Вы знаете, как изменить значок логотипа в вашем шаблоне Joomla (если логотип задан как значок Font Awesome).

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