title: Retina sprite icon issue
body: <p>I'm having a problem with my language switcher retina sprite icon. 
  since I've a :before statement for my language switcher and I applied sprite icon style there. I need your help to adjust it for 2x device pixel ratio (retina). here's the code:</p>
  
  <pre><code>.l-header #nav &gt; div.v-menu::before {
  content: "";
  display: block;
  position: absolute;
  height: 23px;
  width: 23px;
  background-position: 0 -1993px;
  left: 20px;
  top: 16px;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url('../img/sprite-icons-sf04c977769.png');
  background-repeat: no-repeat;
  }
  
  
  
  
  
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0),
     only screen and (min--moz-device-pixel-ratio: 2.0),
     only screen and (-o-min-device-pixel-ratio: 200/100),
     only screen and (min-device-pixel-ratio: 2.0) {
         .l-header #nav &gt; div.v-menu::before {
            background-image:url('../img/sprite@2x.png');
            -webkit-background-size: 0px -3986px;
            -moz-background-size: 0px -3986px;
            background-position: 0px -3986px;
        }
    }
  </code></pre>
  
  <p>I actually have 2x sprite image as well ('../img/sprite@2x.png').</p>
  
  <p>website url: <a href="http://faradid-honar.com" rel="nofollow noreferrer">mywebsite</a></p>
  
  <p>Thank you.</p>