upfront-social-icons

HTML


<ul class="share-wrapper">
    <li class="share-item item-twitter">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-223 1635 35 35" class="icon icon-static icon-twitter-stroke">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-twitter-stroke"></use>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-223 1475 35 35" class="icon icon-hover icon-twitter-color">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-twitter-color"></use>
            </svg>
        </a>
    </li>
    <li class="share-item item-facebook">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-63 995 35 35" class="icon icon-static icon-facebook-stroke">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-facebook-stroke"></use>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-63 835 35 35" class="icon icon-hover icon-facebook-color">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-facebook-color"></use>
            </svg>
        </a>
    </li>
    <li class="share-item item-pinterest">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-63 1155 35 35" class="icon icon-static icon-pinterest-stroke">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-pinterest-stroke"></use>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-223 1155 35 35" class="icon icon-hover icon-pinterest-color">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-pinterest-color"></use>
            </svg>
        </a>
    </li>
    <li class="share-item item-youtube">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-63 1475 35 35" class="icon icon-static icon-youtube-stroke">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-youtube-stroke"></use>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-63 1315 35 35" class="icon icon-hover icon-youtube-color">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-youtube-color"></use>
            </svg>
        </a>
    </li>
    <li class="share-item item-instagram">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="97 835 35 35" class="icon icon-static icon-instagram-stroke">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-instagram-stroke"></use>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="-63 1635 35 35" class="icon icon-hover icon-instagram-color">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-instagram-color"></use>
            </svg>
        </a>
    </li>
    <li class="share-item item-flickr">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="97 1155 35 35" class="icon icon-static icon-flickr-stroke">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-flickr-stroke"></use>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="97 995 35 35" class="icon icon-hover icon-flickr-color">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://example.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-flickr-color"></use>
            </svg>
        </a>
    </li>
</ul>

----
CSS

ul.share-wrapper {
    list-style-type: none;
    padding: 0 15px;
    margin: 0;
    text-align: right;
}

li.share-item {
    display: inline-block;
    margin: 0 5px;
    height: 35px;
}

li.share-item .icon-hover {
    display: none;
}

li.share-item:hover .icon-static {
    display: none;
}

li.share-item:hover .icon-hover {
    display: block;
}

li.share-item a {
    display: block;
    width: 100%;
    height: 100%;
}