Столкнулся с необходимостью сделать на сайте карту сайта. В предыдущей статье я написал, какие проблемы при этом возникли. Здесь же хочу рассказать, как для созданной ранее карты сайта сделать меню, в виде шрифтовой иконки. В итоге должно получиться, как в изображении на рис. 1.

Пункт меню в виде шрифтовой иконки

Рис. 1. Пункт меню в виде шрифтовой иконки.

Казалось, ничего сложного. Ищем подходящую иконку. В нашем случае - это иконка с классом "fa fa-sitemap". Создаем в административной части Joomla пункт меню. Переходим во вкладку "Параметры ссылки" и в качестве CSS-класса ссылки указываем класс нужной нам иконки "fa fa-sitemap" (см. рис. 2). Настройку создать заголовок переводим в позицию нет, чтобы текст пункта меню не отображался.

CSS-класс ссылки пункта меню = fa fa-sitemap

Рис. 2. CSS-класс ссылки пункта меню = fa fa-sitemap.

 Сохраняем, переходим на сайт, смотрим, что получилось (см. рис. 2). 

Вид пункта меню в виде иконки

Рис. 3. Вид пункта меню в виде иконки.

Весьма странно. Хоть настройка создать заголовок переводим в позицию нет (рис. 2), текст данного меню все-равно отображается. Не знаю, так и должен отображаться этот пункт меню, думаю это небольшой "баг" Joomla. Я стал искать, каким способом можно убрать текст, отображаемый рядом с иконкой. Категорически не хотел скачивать само изображение и указывать его в качестве рисунка пункта меню. Самым простым способом оказался следующий способ. Я создал прозрачную картинку, разрешением в 1 пиксель с расширением *.png. Далее я указал эту картинку в качестве изображения ссылки (см. рис. 4).

Настройка пункта меню в виде шрифтовой иконки

Рис. 4. Настройка пункта меню в виде шрифтовой иконки.

После установки настроек во вкладке параметры ссылки получил нужное отображение пункта меню - в виде шрифтовой иконки, отображенной на рис. 1.

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

На этом сегодня все. Успехов Вам в разработке.

Добавить комментарий

Авторам некорректных комментариев доступ на сайт будет заблокирован