Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:
- Иконка должна подходить по размерам к тексту.
- Иконка должна иметь прозрачный фон или фон, аналогичный тому, на котором расположено меню.
- Иконка должна иметь небольшой размер файла (не быть «тяжелой»).
Самый распространенный размер иконки в Интернете 16х16 пикселей, поскольку именно такого размера должны быть фавиконы сайтов (маленькая картинка, располагающаяся перед адресной строкой в браузере).
Вот пример такой иконки: 
Для сайта wedal.ru я выберу именно этот размер.
Добавление иконок пунктам меню Joomla. Шаг 2. Поиск подходящих иконок.
Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.
Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.
Для того чтобы в поиске отображались только иконки нужного размера, задаем настройки:
Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру :-) .
Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.
Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.
Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Простой способ.
После того, как иконки подобраны, можно начинать привязывать их к пунктам меню на сайте. Я расскажу про два способа. Первым будет привязка через настройку пункта меню, опция «Изображение ссылки»:
Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:
Открытие главной страницы сайта просто насилует браузер и компьютер пользователя.
Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Хороший способ.
Хороший способ заключается в использовании CSS-спрайтов. Их суть в том, что все иконки размещаются на одной картинке, а обращение к ним происходит с помощью CSS. Благодаря такому подходу браузер пользователя загружает только одну картинку и соответственно время загрузки страницы уменьшается. Плохая новость – добавление иконок пунктам меню с помощью CSS-спрайта – задача гораздо более сложная, чем способ, описанный выше. Хорошая новость – в настоящее время существуют сервисы, значительно упрощающие создание спрайтов.
Давайте разберемся, как создать спрайт.
- Задаем всем иконкам названия в соответствии с ID пунктов меню, к которым они будут применяться. В менеджере меню в самой правой колонке можно увидеть ID пунктов меню. Иконки должны быть названы «item-ID», например, «item-7»
- Добавляем все иконки, которые должны быть в спрайте в один zip-архив.
- Загружаем архив на сайте http://ru.spritegen.website-performance.org/ и выставляем настройки, например, как показано ниже:
В результате получаем CSS-код для каждой иконки меню и примерно вот такой спрайт:
- Загружаем полученный спрайт к себе на сайт и добавляем полученный код в CSS-файл шаблона.
Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug. Что получилось, можете посмотреть на этом сайте слева.
Главным недостатком спрайтов является сложность обновления оных. Так, например, если у вас появится даже один новый пункт меню, которому нужно добавить иконку, спрайт придется создавать заново.