Иконки для сайта

Здравствуйте, сегодня поговорим про иконки для сайта, а именно:  как вставить иконку в адресную строку сайта (favicon), перед названием категории, заголовков, пунктов меню, списков, ссылок и др.

Скачать исходники для статьи можно ниже

1. Иконка в адресной строке сайта (favicon, фавикон):

В основном используются изображения размера 16×16 пикселей формата ico, помещенные в корневой каталог сайта под именем favicon.ico, однако, сейчас современные браузеры могут поддерживать  различные форматы изображений для favicon:

favicon для сайта

, а также можно задать положение значка (favicon) с помощью следующего кода (то есть не обязательно располагать иконку в корневом каталоге сайта):

<link rel="shortcut icon" href="http://mnogoblog.ru/wp-content/uploads/favicon.ico" />

Или так, если тип файла не ico:

<link rel="icon" type="image/png" href="/someimage.png" />

, где type — формат файла: image/png, image/gif и др.

Как загрузить и вставить фавикон на сайт wordpress?

Заходим в админку wordpress, в левом меню выбрать пункт «Медиафайл» и его подпункт «Добавить новый», далее загружаем нужную иконку для сайта и не забываем скопировать путь до нее.

загружаем иконку для сайта

копируем путь до favicon

Следующим шагом заходим в файл header.php — в панели управления wordpress выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл header.php — после в его коде ищем закрывающий тег </head> и вставляем перед ним код с указанием пути до иконки:


...

wp_head();
?>
<link rel="shortcut icon" href="http://mnogoblog.ru/wp-content/uploads/2013/08/favicon.ico" />

</head>
<body <?php body_class(); ?>>

...

PS: В случае отсутствия указания до фавикона (favicon) браузер пытается загрузить favicon.ico из корня сайта — поэтому можно просто загрузить иконку в корневую папку без правки кода сайта.

2. Иконки заголовков.

Давайте добавим иконку например к заголовку H3.

иконка заголовков

Для этого заходим в файл стилей — style.css (панель управления wordpress, пункт «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем файл style.css) — и в его коде, в самом конце, вставить следующее:


h3 {
 background: url(http://mnogoblog.ru/wp-content/uploads/2013/08/iconcanav.gif) no-repeat !important;
 padding-left: 20px !important;
}

, где строчка:

background — задает url до иконки.

3. Иконка списков.

Для примера возьмем стандартную тему wordpress — Twenty Eleven.

Давайте исправим иконки списков в сайдбаре (боковой колонке):

иконки списков

И создадим следующее:

иконки списков

Для этого достаточно зайти в файл стилей — style.css (панель управления wordpress, пункт «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем файл style.css) — и в его коде, в самом конце, вставить следующее:


.widget ul li {
 background: url(http://mnogoblog.ru/wp-content/uploads/2013/08/iconcanav.gif) no-repeat !important;
 padding-left: 20px !important;
}

.widget ul {
 list-style: none !important;
}

, где строчка:

background — задает url до иконки.

list-style: none !important — убирает иконки списков, которые стояли изначально в сайдбаре.

4. Иконка для внешних ссылок на сайте

Ответ на данный пункт можете найти в моей статье — Как выделить внешние ссылки на сайте.

5. Иконка категорий

Ответ на данный пункт можете найти в моей статье — Иконки для категории.

6. Иконка виджетов, иконки для заголовков виджетов

Ответ на данный пункт можете найти в моей статье — Иконки для виджетов.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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