How can I rotate a font icon 45 degrees?

Question

I want to rotate this font icon 45 degrees. The icon has this CSS (all CSS compiled via LESS):

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

And it's this Flaticon: http://www.flaticon.com/free-icon/hand-pointer_70655

I've installed it as an icon font.

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:

<i class="flaticon-hand-10 gly-rotate-45"></i>

Where this is the class gly-rotate-45:

.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);
}

The browser is picking up transform: rotate(45deg);, but the icon isn't rotated. How can I rotate this icon font?

Answer 1

The reason why the icon does not rotate in it's 'raw' state is because it's default display setting is inline.

You cannot apply transforms to inline elements like this.

To solve the problem just apply `display:inline-block".

@font-face {
  font-family: 'Flaticon';
  src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}
.flaticon-hand-10:before {
  content: "\e000";
}
.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);
  display: inline-block;
}

<i class="flaticon-hand-10 gly-rotate-45"></i>