Іконка поруч з зовнішніми посиланнями

Кріс Койєр

Переклад: Влад Мержевич

Деякий час тому я відкрив код JSFiddle в моєму браузері від CSS Wizardry. Ця ідея застрягла в моїй голові - вставити іконку поряд із посиланням, використовуючи лише CSS. За допомогою деякого jQuery ми можемо досягти цього досить легко.

«Я хочу» тільки CSS

Було б дуже приємно мати простий семантичний код, де ми могли б вставити фонове зображення іконки за допомогою сервісу, наприклад, getFavicon.

Сервіс Google Favicon

У Google є свій власний сервіс іконок, який можна використовувати. Наприклад: http://www.google.com/s2/u/0/favicons?domain=css-tricks.com.

Метод getFavicon

Є ще один подібний сервіс, названий getFavicon. Він базується на Google AppEngine, але працює трохи повільніше. Простота полягає в тому, що вам не потрібно мати справу з іменами хостів, вам достатньо вказати URL.

Про виконання?

Кількість HTTP-запитів на сторінці суттєво впливає на продуктивність. Кожне маленьке зображення створює новий запит на сторінці. Чудовий сервіс іконок, який може автоматично збирати іконки для вас в один запит - http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com.

JavaScript
SEO текст: Навчіться вставляти іконки поряд із посиланнями за допомогою CSS та jQuery. Використовуйте сервіси Google Favicon або getFavicon для автоматичного отримання іконок для вашого веб-сайту. Оптимізуйте продуктивність шляхом об'єднання іконок в один запит.

Часті запитання