Joomla 3.x. Как заменить текст элемента меню изображением

Из этого туториала Вы узнаете, как использовать изображения вместо текста для элементов меню в Joomla.

Joomla 3.x. Как заменить текст элемента меню изображением

Существует несколько способов добавления значков в меню:

Добавление изображений в меню, используя Менеджер Меню

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

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

2. Перейдите на вкладку Меню (Menus) > Главное меню (Main Menu).

3. Затем, нажмите на любой элемент меню, для того чтобы внести в него изменения:

   

4. Измените тип элемента меню на Внешнюю ссылку (External Link).

5. Найдите раздел настроек Тип ссылки (Link type).

6. Задайте значение параметра Добавить название пункта меню (Add Menu Title) Нет.

7. Используйте кнопку Выбрать (Select), для того чтобы выбрать ваше изображение.

8. Нажмите на кнопку Сохранить (Save), для того чтобы применить изменения и проверьте ваш сайт:

   

Добавление изображений, используя код CSS

Второй способ основывается на добавлении класса css изображения в файл templates/theme###/css/templates.css (где ### — это номер вашего шаблона). Некоторые модули меню для Joomla, такие как модуль IceMegaMenu, не позволят Вам добавить изображение для элемента меню в админ панели. Вы можете добавить изображение, используя код css:

1. Используя фоновое изображение в коде css:

   1. Откройте ваш сайт в браузере и используйте Инструмент разработчика, для того чтобы найти пользовательский класс css, который Вам нужно добавить для элемента меню:

   2. Скопируйте класс css, который Вы найдёте. Как правило, код css выглядит следующим образом:

      #iceMenu_### .iceMenuTitle:before {
        content: url("image_link_here") !important;
        top: 20px !important;
        position: relative !important;
        display: inline-block !important;
        line-height: 45px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      Где ### — это идентификационный номер элемента меню. Вы можете узнать идентификационные номера пунктов меню в вашей админ панели. Во вкладке Меню (Menus) > Главное меню (Main Menu) Вы увидите следующее:

      

      image_link_here — это ссылка на ваше изображение элемента меню.

   3. Подключитесь к вашему серверу, используя FTP или панель управления хостингом.

   4. Найдите файл templates.css в папке templates/theme###/css на вашем сервере. Откройте файл в любом редакторе кода на вашем компьютере.

   5. Добавьте ваш пользовательский класс css в конце файла templates.css.

   6. Сохраните файл, загрузите его назад на сервер и проверьте результат на вашем сайте.

2. Используя значки FontAwesome:

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

   2. Внесите изменения в файл templates/theme###/css/templates.css (где ### — это номер вашего шаблона).

   3. Код CSS, который нужно добавить в файл, как правило, выглядит следующим образом:

      #iceMenu_101 .iceMenuTitle:before {
        font-family: FontAwesome !important;
        content: "###" !important;
        font-size: 45px !important;
        top: 20px !important;
        position: relative !important;
        display: inline-block !important;
        line-height: 45px !important;
        height: 90px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      Где ### — это класс значка FontAwesome. Список доступных значков можно найти на сайте FontAwesome.

   4. Не забудьте сохранить файл и загрузить его на сервер.

   5. Проверьте ваш сайт для просмотра изменений.

Теперь Вы знаете, как использовать изображения вместо текста в элементах меню в Joomla.

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

Joomla 3.x. Как заменить текст элемента меню изображением