title: How can I rotate a font icon 45 degrees?
body: <p>I want to rotate this font icon 45 degrees. The icon has this CSS (all CSS compiled via LESS):</p>
  
  <pre><code>[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
    margin-left: 20px;
  }
  </code></pre>
  
  <p>And it's this Flaticon: <a href="http://www.flaticon.com/free-icon/hand-pointer_70655" rel="noreferrer">http://www.flaticon.com/free-icon/hand-pointer_70655</a></p>
  
  <p>I've installed it as an icon font. </p>
  
  <p>However, when I try to rotate it 45 degrees, so that the finger points to the top right corner, it doesn't work. I'm trying by installing the icon like so:</p>
  
  <pre><code>&lt;i class="flaticon-hand-10 gly-rotate-45"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>Where this is the class <code>gly-rotate-45</code>:</p>
  
  <pre><code>.gly-rotate-45 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  </code></pre>
  
  <p>The browser is picking up <code>transform: rotate(45deg);</code>, but the icon isn't rotated. How can I rotate this icon font?</p>