JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<a href="http://yahoo.com/something">yahoo</a>
<a href="http://google.com/something">google</a>
<a href="http://msn.com/something">msn</a>
<a href="http://bing.com/something">bing</a>
<a href="http://facebook.com/something">facebook</a>
<a href="http://instagram.com/something">yelp</a>
<a href="http://yelp.com/something">yelp</a>

CSS

a {
    margin-top: 5px;
    padding-left: 18px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    display: block;
}

JavaScript

addFavicons($('a'));
    
function addFavicons ($links) {
    var domains = [],
        background = '';
    
    $links.each(function () {
        var domain = $(this).attr('href').match(/http\:\/\/([^\/]+)\//i);
        if (domain) domains.push(domain[1]);
    });
    
    background = 'http://favicon.yandex.net/favicon/' + domains.join('/');
    
    $links.each(function (key) {
        console.log(arguments);
        $(this).css({
            background: "url(" + background + ") no-repeat 0px -" + (key * 16) + "px"
        });
    });
}