"CSS Sprite"
Bootstrap 3.3.0 Snippet by selvasekhar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="sprite-github "></div> <div class="sprite-gmail "></div> <div class="sprite-linkedin"></div> <div class="sprite-rss"></div> </body> </html>
.sprite { background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); background-repeat: no-repeat; display: block; } .sprite-github { background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); width: 30px; height: 30px; background-position: -5px -5px; } .sprite-gmail { width: 30px; height: 30px; background-position: -45px -5px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-linkedin { width: 30px; height: 30px; background-position: -85px -5px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-rss { width: 39px; height: 39px; background-position: -5px -54px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-settings-icon_0 { width: 100px; height: 100px; background-position: -54px -54px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-small-nav-active-after { width: 25px; height: 34px; background-position: -174px -5px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-small-nav-active-before { width: 25px; height: 34px; background-position: -174px -49px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-stackoverflow { width: 30px; height: 30px; background-position: -164px -93px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-stars-icon_0 { width: 100px; height: 100px; background-position: -209px -5px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-tumblr { width: 30px; height: 30px; background-position: -5px -115px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-twitter { width: 30px; height: 30px; background-position: -204px -115px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); } .sprite-youtube { width: 39px; height: 39px; background-position: -244px -115px; background-image: url(https://res.cloudinary.com/www-googleg-com/image/upload/v1482991429/download_mcknw9.png); }

Related: See More


Questions / Comments: