Font awesome and SVG Font resizes with respect to screen Resolution

by Prasad

HTML

<div class="wrapper">
	<h1>Font Awesome Icons Using vh</h1>
  <span class="fa fa-check-square-o img-responsive"></span>
  <span class="fa fa-check img-responsive"></span>
  <span class="fa fa-comment img-responsive"></span>
  <hr>
  <h1>Using vh with SVG Image<></h1>
 <div class="actions">
   <div class="a-share"></div>
   <div class="a-print"></div>
   <div class="a-tag"></div>
   <div class="a-delete"></div>
</div>
	<div class="icon"></div>
</div>
    <!--This page need Font Awesome-->

CSS

@charset "utf-8";

/* CSS Document */

/*	Used CSS# property vw,vh
	1vw = 1% of viewport width
	1vh = 1% of viewport height
	1vmin = 1vw or 1vh, whichever is smaller
	1vmax = 1vw or 1vh, whichever is larger
*/
.wrapper { margin:5px 10px; font-size:100%; }

h1 { font-size:6vh; }

span { margin:4px 8px; font-size:4vh; text-decoration:none; color:#333; }

.actions { display: block; overflow: auto; }

.actions div { width:10vh; height:10vh; margin:1vh; background-image: url('../images/icons.svg'); background-size: 100vh 100vh; background-repeat: no-repeat; color: #444; display: block; float: left; text-decoration: none; text-shadow: 0 -1px 2px #fff; }

.actions div.a-share { background-position: -2vh -1vh; }

.actions div.a-print { background-position: -2vh -12vh; }

.actions div.a-tag { background-position: -3vh -20vh; }

.actions div.a-delete { background-position: -3vh -59vh; }

.icon { background:url(../images/Messenger.png) no-repeat; width:48px; height:48px; }