CSS Icon Set Revolution

A revolution has come that is about building Icon set in pure CSS. It may look like a magic first time. How CSS only can produce Icon set.

CSS Icon set has a distinct advantage. It avoids loading images which are used to load various icons. Even sprite image was bigger due to various icons in it. It is far better than base64 encoded images as this does not take that much bytes. Base64 take more bytes than images.

Disadvantage of CSS only icon set is that it may not be supported in browser. All modern browser support this.

Icons used here in sidebar and below the post is made in CSS3 only. If you can see icons there then your browser is supporting CSS icon.

Code for Four Icons I have used in this blog:

Image of CSS only Icon

Image of CSS only Icon

<style><!--
        /*Generic*/
        ul {
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    font:0.875em/1 Arial, sans-serif;
}
ul li {
    float:left;
    width:33px;
    height:33px;
    margin:10px;
}
ul li a {
    display:block;
    width:32px;
    height:32px;
    overflow:hidden;
    border:1px solid transparent;
    line-height:32px;
    text-decoration:none;
    /* css3 */
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px; /* standards version last */
}
ul li a:hover,
 ul li a:focus,
 ul li a:active {
    opacity:0.8;
    border-color:#000;
}
.facebook a {
    position:relative;
    border-color:#3c5a98;
    text-transform:lowercase;
    text-indent:11px;
    letter-spacing:10px;
    font-weight:bold;
    font-size:32px;
    line-height:33px;
    color:#fff;
    background:#3c5a98;
    /* css3 */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
}
/*Twitter*/
.twitter a {
    position:relative;
    border-color:#a8eaec;
    text-transform:lowercase;
    text-indent:11px;
    letter-spacing:40px;
    font:bold 30px/1 Tahoma, sans-serif;
    line-height:30px;
    color:#76DDF8;
    background:#daf6f7;
    /* css3 */
    text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
    background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
}
/* ------------------------------------------------------------------------------------
--  RSS
------------------------------------------------------------------------------------ */
.rss a {
    position:relative;
    width:30px;
    padding:0 2px;
    border-color:#ea3335;
    text-transform:lowercase;
    text-indent:-186px;
    font-size:32px;
    font-weight:bold;
    color:#fff;
    background:#e33243;
    /* css3 */
    /* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e33243));
    background:-moz-linear-gradient(top, #f19242, #e33243);
}
/* create circle */
.rss a:before {
    content:"0a0";
    position:absolute;
    bottom:5px;
    left:5px;
    width:6px;
    height:6px;
    background:#fff;
    /* css3 */
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px; /* standards version last */
}
/* create the two arcs */
.rss a:after {
    content:"0a0";
    position:absolute;
    bottom:5px;
    left:5px;
    width:11px;
    height:11px;
    border-style:double;
    border-width:12px 12px 0 0;
    border-color:#fff;
    /* css3 */
    -moz-border-radius:0 50px 0 0;
    -webkit-border-top-right-radius:50px;
    border-radius:0 50px 0 0; /* standards version last */
}
/* ------------------------------------------------------------------------------------
--  GOOGLE
------------------------------------------------------------------------------------ */
.google a {
    position:relative;
    border-color:#23278d;
    text-transform:lowercase;
    text-indent:10px;
    letter-spacing:40px;
    font: 30px/20px Georgia, Times New Roman, Times, serif;
    color:#fff;
    background:#1e3c7f;
    /* css3 */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#447aec), to(#1e3c7f));
    background:-moz-linear-gradient(top, #447aec, #1e3c7f);
}
-->

HTML for Icons:

<div class="social">
            <ul>
                <li class="facebook" id="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
                <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
                <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
                <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
            </ul>
        </div>