Добавление иконок пунктам меню Joomla. Простой и хороший способы

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

Шаг 1. Выбор размера иконок

Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:

1. Иконка должна подходить по размерам к тексту.
2. Иконка должна иметь прозрачный фон или фон, аналогичный тому, на котором расположено меню.
3. Иконка должна иметь небольшой размер файла (не быть «тяжелой»).

Самый распространенный размер иконки в Интернете 16х16 пикселей, поскольку именно такого размера должны быть фавиконы сайтов (маленькая картинка, располагающаяся перед адресной строкой в браузере).

Вот пример такой иконки:

Для сайта wedal.ru я выберу именно этот размер.

Шаг 2. Поиск подходящих иконок

Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.

Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.

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

Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру :-) .

Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.

Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.

Шаг 3. Привязка иконок. Простой способ

После того, как иконки подобраны, можно начинать привязывать их к пунктам меню на сайте. Я расскажу про два способа. Первым будет привязка через настройку пункта меню, опция «Изображение ссылки»:

Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:

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

Шаг 3. Привязка иконок. Хороший способ

Хороший способ заключается в использовании CSS-спрайтов.  Их суть в том, что все иконки размещаются на одной картинке, а обращение к ним происходит с помощью CSS. Благодаря такому подходу браузер пользователя загружает только одну картинку и соответственно время загрузки страницы уменьшается. Плохая новость –  добавление иконок пунктам меню с помощью CSS-спрайта – задача гораздо более сложная, чем способ, описанный выше. Хорошая новость – в настоящее время существуют сервисы, значительно упрощающие создание спрайтов.

Давайте разберемся, как создать спрайт.  

1. Задаем всем иконкам названия в соответствии с ID пунктов меню, к которым они будут применяться. В менеджере меню в самой правой колонке можно увидеть ID пунктов меню. Иконки должны быть названы «item-ID», например, «item-7»
2. Добавляем все иконки, которые должны быть в спрайте в один zip-архив.
3. Загружаем архив на сайте http://ru.spritegen.website-performance.org/ и выставляем настройки, например, как показано ниже:

   

    В результате получаем CSS-код для каждой иконки меню и примерно вот такой спрайт:

   

4.  Загружаем полученный спрайт к себе на сайт и добавляем полученный код в CSS-файл шаблона.

Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug. Что получилось, можете посмотреть на этом сайте слева.

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

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

UPD.: Помимо простого и хорошего способа, существует также еще и отличный. О нем написана отдельная статья: Добавление иконочных шрифтов на сайт Joomla.