Наверняка вы все видели в результатах поиска рядом со ссылкой иконку сайта. Возможно кто-то хотел сделать у себя на сайте нечто подобное, но не смог найти решение. А делается все это достаточно просто.
Вариант 1. Исключительно через CSS + сервис getFavicon
Предположим, что у вас ссылки строятся таким образом
|
1 |
<a href="http://netno.ru">Netno.ru</a> |
тогда вот такой CSS вам в помощь
|
1 2 3 |
a[href^="http"]:before { content: url(http://g.etfv.co/ + attr(href) +); } |
Вариант 2. Основан на первом варианте, но с использование jQuery
|
1 2 3 4 |
$("a[href^='http']").each(function() { $(this).css({ background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat", "padding-left": "20px" }); }); |
Вариант 3. Favicon сервис от Google
При использовании данного варианта нам понадобится только имя домена.
Простой функцией на JavaScript с использованием регулярно выражения мы получим имя хоста из ссылки
|
1 2 3 |
function getDomain(url) { return url.match(/:\/\/(.[^/]+)/)[1]; } |
Далее для простоты реализации будем использовать jQuery.
|
1 2 3 |
$("a[href^='http']").each(function(){ $(this).css({background: "url(http://www.google.com/s2/u/0/favicons?domain="+getDomain(this.href)+") left center no-repeat", "padding-left": "20px"}); }); |
UPDATE:
Данный вариант можно еще упростить и не использовать функцию getDomain(), а воспользоваться свойством this.hostname из объекта ссылки
|
1 2 3 |
$("a[href^='http']").each(function(){ $(this).css({background: "url(http://www.google.com/s2/u/0/favicons?domain="+this.hostname+") left center no-repeat", "padding-left": "20px"}); }); |