Загрузка...

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

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

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

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

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

Добавление иконок пунктам меню Joomla. Шаг 2. Поиск подходящих иконок.

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

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

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

2

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

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

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

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Простой способ.

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

3

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

4

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

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Хороший способ.

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

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

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

    5

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

    Joomla icons6

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

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

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

{

}