Как вставить иконки в пункты меню сайта в Joomla (Шаблон Protostar)

В этой статье рассмотрим, как вставить иконки в пункты меню сайта Joomla, чтобы отображалось не только название, но и рядом с ним была иконка, символизирующая данный пункт меню. Напомню, что работаю я с шаблоном Protostar. А материал данной статьи затрагивает стили именно этого шаблона. Но, если используется другой шаблон, то не факт, что приведённый ниже рецепт окажется бесполезным. 😉

Постановка задачи

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

В общем, стандартное меню. Но нет в нём индивидуальности, а очень хочется. =)

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

Менеджер меню. Пункт меню. Вкладка «Параметры ссылки»

Для того, чтобы поменять внешний вид нашего пункта меню нам потребуется админка Joomla, а конкретно Вкладка «Параметры ссылки», которая доступна в «Менеджере меню» при редактировании или создании пункта меню. Работать будем с полем «CSS-класс ссылки» так, как показано на картинке:

  1. Вставим в поле название иконки, которую нам хочется видеть в пункте меню перед его названием, например, icon-users
  2. Сразу поставим пробел в поле «Заголовок меню» (чтобы иконка не сливалась с названием пункта меню)
  3. Сохраним внесённые изменения и посмотрим что получилось

Заголовок пункта меню уползает вниз (располагается не горизонтально, а вертикально)

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

Исправляем ситуацию. Приводим пункт меню в горизонтальный вид.

Пока не понимаю, чем руководствовались создатели шаблона Protostar и почему всплывает такой косяк. Ясно одно: свойству display пункта меню задано значение block, поэтому он поблочно и выводит каждый символ, складывая их один под другим.

А нам нужно их вытянуть в строчку, значит значение свойства display должно быть inline.

Для этого нужно внести изменения в файл template.css, который находится в папке шаблона:

./templates/protostar/css/template.css

Править можно с помощью админки Joomla, можно сторонним редактором. Важно что править, а не чем 😉

А править нужно строчку со свойством display пункта меню .nav > li > a, которая у меня в этом файле находится в районе 2910- строки. Итак,

Было:

.nav > li > a {
	display: block;
}

Стало:

.nav > li > a {
	display: inline;
}

Новый вид пунктов меню

После внесения правок в файл template.css шаблона можно насладиться новым (модернизированным) видом Главного меню сайта! =)

Но, что-то мне кажется, что этим дело не кончится и ещё придётся вернуться к этому вопросу, когда появятся вложенные пункты подменю.

P.S.

Как показала практика, меню, с подобными правками начинает хорошо выглядеть только в случае ширины экрана больше 979px. Таковы настройки шаблона Protostar. Если ширина экрана меньше (критично для планшетов и тем более мобильных телефонов), то Главное меню сайта сворачивается сворачивается в одну кнопку и потом разворачивается кликом по ней в виде вертикального списка. И в этом вертикальном списке пункты меню наползают друг на друга.

Можно ковырять шаблон дальше, дополнив нижний отступ каждому пункту меню типа так:

<li>

Но это уже слишком большое вмешательство в задумку дизайнеров шаблона Protostar, и вместо иконок имеет смысл ставить картинки. Они нормально работают в пунктах меню при display: block; хотя, большое количество картинок увеличит время загрузки картинок (что снова критично для мобильных устройств из-за увеличения количества обращений к серверу).

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

Смотри статью «Как вставить картинки в пункты меню сайта в Joomla».

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:

Иконки для меню сайта • фриланс-работа для специалиста • категория Векторная графика ≡ Заказчик Денис Ш.

дата онлайн рейтинг стоимость время выполнения


  1.  фрилансер больше не работает на сервисе

  2. 1 день300 UAH

    1 день300 UAH

    Здравствуйте. Готова создать для вас иконки, учту вашу стилистику и пожелания.

    Обращайтесь.

  3. 1 день300 UAH

    1 день300 UAH

    Добрый день, стилистику уловил, но хотелось бы посмотреть на ваш сайт, чтобы все вписать по цветам. Так же хотелось бы узнать для каких разделов нужны иконки. С уважением, Дмитрий.

  4. 2 дня800 UAH

    2 дня800 UAH

    Доброго дня! Заинтересован Ваш запрос, обращайтесь. Рисуем в векторе

    Мой портфолио — Behance
    Доброго дня! зацікавила ваша пропозиція, звертайтесь. намалюю в векторі
    моє портфоліо — Behance

    Показать оригинал

    Перевести

  5. 1 день450 UAH

    1 день450 UAH

    Добрый день, Денис

    Сделаю иконки в заданном стиле.
    Если будут правки, внесу оперативно.
    Пример похожей работы: Google Drive
    Обращайтесь, буду рада.

  6. 1 день500 UAH

    1 день500 UAH

    Здравствуйте, заинтересовал ваш проект. Примеры иконок можете посмотреть в профиле. Обращайтесь, буду рада сотрудничеству.

  7. 3140

     134  0


    1 день400 UAH

    Светлана Сидоренко

    1 день400 UAH

    Здравствуйте.
    Есть опыт рисования иконок для сайта.
    Учту все ваши пожелания, сделаю иконки в стилистике сайта.
    Работаю на результат.
    Я всегда на связи.
    Приступить готова прямо сейчас

  8. 5 дней2000 UAH

    5 дней2000 UAH

    Здравствуйте!
    Готова разработать для Вас иконки.
    Вот мое портфолио: Google Drive
    Обращайтесь.

  9. 2 дня200 UAH

    2 дня200 UAH

    Доброго дня! Задача понятна, готова к сотрудничеству)
    Работа в портфеле.
    Доброго дня! Задача зрозуміла, готова до співпраці)
    Мої роботи у портфоліо.

    Показать оригинал

    Перевести

  10. 2 дня580 UAH

    2 дня580 UAH

    Добрый день, Денис!
    Сделаю для вас оригинальные иконки.
    Разработаю несколько вариантов стиля на примере 2-3 иконок. Остальное доделаю в утвержденном стиле.
    Пишите, обсудим детали!

  11. ставка скрыта фрилансером

  12. ставка скрыта фрилансером

  13. 3 дня500 UAH

    3 дня500 UAH

    Здравствуйте!
    Готова выполнить вашу задачу и разработать иконки. Примеры графики в профиле. Обращайтесь.

  14. 1 день450 UAH

    1 день450 UAH

    приветствую!
    Более 10 лет работаю с графикой (реклама/полиграфия/интернет-контент)

    С удовольствием сделаю иконки в заданном стиле.
    работаю до полного утверждения!
    Смотрите мое портфолио/отзывы в профиле. Буду рад сотрудничеству!

  15. ставка скрыта фрилансером

  16.  фрилансер больше не работает на сервисе

  17.  фрилансер больше не работает на сервисе

  18. 2 дня450 UAH

    2 дня450 UAH

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

    Готов приступить к работе, время исполнения 1-2 дня.

    С уважением Тарас.

  19. 2 дня550 UAH

    2 дня550 UAH

    Прилагаю пример работы, также проект иконок для сайта, сделаю все по вашим пожеланиям, обращайтесь.
    Freelancehunt

  20. 3 дня300 UAH

    3 дня300 UAH

    Добро пожаловать Очень заинтересован ваш проект!
    Готов выполнить задание.
    Behance
    Обращайтесь .
    Привіт. Дуже зацікавив Ваш проект!
    Готова виконати завдання.
    Behance
    Звертайтесь.

    Показать оригинал

    Перевести

  21. ставка скрыта фрилансером

  22.  фрилансер больше не работает на сервисе

  23. 2 дня500 UAH

    2 дня500 UAH

    Добрый день, готова приступить к работе
    Хотелось бы увидеть ваш сайт, чтобы все вписалось по стилю
    Есть опыт работы
    Буду рада сотрудничать!
    Мое портфолио: Behance

  24. 2 дня450 UAH

    2 дня450 UAH

    Здраствуйте, Денис!
    Буду рад сотрудничеству, учту все пожелания, внесу нужние правки!

    портфолио — Freelancehunt
    пишите, осудим цену и сроки)

  25. 1 день400 UAH

    1 день400 UAH

    Здравствуйте!
    Заинтересовал ваш проект, выполню 1-2 дня. Готова приступить сегодня
    Создам иконки в нужной стилистике, сделаю правки до утверждения.
    Буду рада сотрудничеству)

  26. 1 день300 UAH

    1 день300 UAH

    Здравствуйте, сделаю иконки в данной стилистике
    Пишите для обсуждения деталей, буду рада сотрудничеству.

  27. 2 дня280 UAH

    2 дня280 UAH

    Здравствуйте. Готова создать уникальные иконки для Вас.
    Предоставлю все нужные форматы.
    Я всегда на связи. Уважаю поставленные сроки.
    Буду рада работать с Вами)

  28. 2 дня300 UAH

    2 дня300 UAH

    Здравствуйте. Готов разработать иконки. Обращайтесь, буду рад сотрудничеству 🙂

  29. ставка скрыта фрилансером

  30. 2 дня450 UAH

    2 дня450 UAH

    Здравствуйте!
    С удовольствием выполню Ваше задание!
    Отрисую иконки в векторе, сохраню во всех необходимых форматах!
    Работаю в Illustrator
    Пишите — обсудим детали)

  31. 2 дня300 UAH

    2 дня300 UAH

    Добрый день!
    Готова приступить к заказу. Нужна ссылка на сайт и разделы. Работаю быстро и внимательно к деталям. Учту все пожелания. Примеры иконок в портфолио.
    Пишите, буду рада сотрудничеству.

  32.  фрилансер больше не работает на сервисе

  33. 4 дня1000 UAH

    4 дня1000 UAH

    Добрый день.
    Уточните детали вашего проекта.

    Портфолио: https://mobile.designer-vip.com/portfolio/

  34. 7 дней2000 UAH

    7 дней2000 UAH

    Доброго времени суток. Рисовал такие иконки, вот они: Freelancehunt отзыв на странице к ним.Приступлю сразу после утверждения условий.

  35. 1 день300 UAH

    1 день300 UAH

    Добрый день, Денис!
    Готова сразу же приступить к обсуждению проекта и работе. В случае чего, вносу поправки, чтобы Вы остались удовлетворены моей работой на 100%
    Буду рада сотрудничеству!

  36. ставка скрыта фрилансером

  37. 2 дня1500 UAH

    2 дня1500 UAH

    Здравствуйте
    В дизайне больше 2 лет.
    Готов приступить!
    Выполняю задачи качественно и профессионально!
    Работаю в Figma, Photoshop, Illustrator.
    Примеры работ в портфолио:
    Behance
    Давайте делать стиль!

  38. 2 дня500 UAH

    2 дня500 UAH

    Здравствуйте, заинтересовал ваш проект) Выполняю поставленные задачи быстро и качественно, работаю до полного удовлетворения результатом)
    Некоторые мои работы можно посмотреть здесь: Dribbble

  39. 2 дня500 UAH

    2 дня500 UAH

    Здравствуйте! Работаю с векторной графикой более 2х лет. Специализируюсь на лайн арт и флет стилистике. Есть опыт отрисовки иконок в этой стилистике https://image.shutterstock.com/z/stock-vector-set-of-volunteering-icons-isolated-black-contours-on-white-background-volunteer-charity-help-1700954860.jpg
    Открыта к обсуждению и корректировкам на всех этапах работы над проектом. Буду рада сотрудничеству.

  40. 1 день450 UAH

    1 день450 UAH

    Здравствуйте, буду рад сотрудничать )
    Портфолио — Behance
    https://www.instagram.com/demsey_dee/

  41.  фрилансер больше не работает на сервисе

Иконки меню, логотипы, символы – Скачать PNG, SVG

Иконки

Иконки

Иллюстрации

Фото

Музыка

Все стили

Анимированные и статичные

Анимированные и статичные

Анимированный

Статический

Все дизайнеры

Все конструкторы

Иконки8

Независимый

Перекрасить

интерфейс вектор иллюстрация икона макет пользовательский интерфейс приложение технологии Интернет

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню 9000 3 Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Меню

Не хватает значка? Мы создадим ее

Расскажите нам о нужной вам иконке, и мы бесплатно нарисуем ее в одном из существующих стилей Icons8.

Дизайн иконок меню, темы, шаблоны и загружаемые графические элементы на Dribbble

  1. Посмотреть минимальную навигацию

    Минимальная навигация

  2. Просмотр навигации по боковой панели для Dashboard

    Боковая панель навигации для приборной панели

  3. Посмотреть 🔥 Анимация панели вкладок — Темная версия🌙

    🔥 Анимация панели вкладок — Темная версия🌙

  4. Посмотреть минимальную боковую панель навигации для приборной панели

    Минимальная боковая панель навигации для приборной панели

  5. Посмотреть значки Kick-it Food

    Пищевые иконки Kick-it

  6. Просмотр боковой панели навигации для приложения управления файлами

    Навигация по боковой панели для приложения управления файлами

  7. Посмотреть 🔥 Анимация панели вкладок — Темная версия🌙

    🔥 Анимация панели вкладок — Темная версия🌙

  8. Посмотреть меню навигации, взаимодействие!

    Меню навигации, взаимодействие!

  9. Посмотреть приложение Defispot для iOS — версии панели вкладок

    Приложение Defispot для iOS — Версии панели вкладок

  10. Просмотр навигации по вкладке FirstVet

    Навигация по вкладке FirstVet

  11. Просмотр боковой панели навигации — стекло

    Боковая панель навигации — стекло

  12. Просмотр боковой панели навигации

    Боковая панель навигации

  13. View PRO — дизайн мобильных приложений для команд

    PRO — дизайн мобильного приложения для рабочих групп

  14. Приложение View Food 🍔🍱🍖🍻

    Приложение для еды 🍔🍱🍖🍻

  15. Просмотр боковой панели навигации — облегченная версия

    Боковая панель навигации — облегченная версия

  16. Просмотр меню навигации боковой панели — анимация

    Меню навигации боковой панели — Анимация

  17. Просмотр боковой панели навигации

    Боковая панель навигации

  18. Просмотр боковой панели навигации — облегченная версия 🔥🥳

    Боковая панель навигации — облегченная версия 🔥🥳

  19. Просмотр боковой панели навигации

    Боковая панель навигации

  20. Просмотр анимации панели вкладок

    Анимация панели вкладок

  21. Посмотреть стекло навигации боковой панели — Spotify 🎸🤘

    Стекло навигации боковой панели — Spotify 🎸🤘

  22. Просмотр боковой панели навигации для приложения для управления файлами электронной почты

    Навигация по боковой панели для приложения управления файлами электронной почты

  23. Просмотр анимации значков меню

    Анимация значков меню

  24. Просмотр боковой панели навигации с универсальным набором значков v2.

    No related posts.