Add possibility to rotate existing glyph with css transform

[fry2k]

This pull request adds the possibility to rotate any existing glyph with an angel between 1 and 259 degrees and adds the css definition therefore. The rotated glyphs are also shown at the demo.html. You can rotate the source glyph multiple times.

I used this for arrows that I have only for example the svg for arrow-right and rotate the arrow with 90, 180 and 270 deg for arrow-down, arrow-left and arrow-up.

If you like it I could also add the possibility to flip a glyph horizontal or vertical.

I run into trouble verifying the generated demo.html with my rotated icons so I commited also the fix about the wrong font-face generation at the demo.html which is discussed here: https://github.com/sapegin/grunt-webfont/issues/331

[scottyeck]

This could easily be resolved with a pre-processor. 😎

For example, with Sass:

//
// Base styles
//
.icon:before {
    font-family: "Icons";
    // other properties here
}

//
// Codepoint assignment
//
.icon-arrow-up:before {
    content: "\f104";
}

All the code above would have been generated by grunt-webfont. You'd only need to add the following:

.icon-arrow-down {
     @extend .icon-arrow-up;
     &:before {
          transform: rotate(180deg);
     }
}

Just my two cents, but I'd be concerned about over-specialization here. Obviously @sapegin has the more important say 😜

[scottyeck]

Also, FWIW, should this code get merged, just a head's up that the authorship of your commits isn't currently tied to your GitHub username, which I'd recommend gets amended. 👍

[sapegin]

@scottyeck is right, no need to implement CSS inside the plugin.