1

I want to use Font Awesome icons in my application. Because every icon have to be rendered as the part of an existing SVG element, instead of using the webfonts I want to use the SVG paths.

Given that the design grid for SVG glyphs points upward, as explained here: Extracting SVG from Font Awesome

I understand why they are appearing upside down, the question is, how to rotate them properly. The only solution I found so far was to rotate the icons programmatically before placing them to the canvas:

var icon = require('icons/fa-copy');
...
el.transform("r180"); //Raphael

my question is, how can I achieve the same with css, for example -webkit-transform?

Applying this transformation on the <path> element which is containing the SVG path the icon was rotated and translated to (0, 0).

EDIT

Note that this is about rotating SVG path elements, see this fiddle:

http://jsfiddle.net/NWXFn/

Community
  • 1
  • 1
Akos K
  • 7,071
  • 3
  • 33
  • 46
  • 1
    I haven't worked with SVG paths before, but can't you just rotate the SVG element with pure css? http://jsfiddle.net/NWXFn/1/ – nkmol Dec 17 '13 at 12:15
  • @nkmol that would rotate the whole canvas together with the other elements, I have to rotate the icon only. Try to apply your css transformations to `body > svg > path` and see what happens. – Akos K Dec 17 '13 at 12:18
  • @nkmol finally, I was able to rotate it: http://jsfiddle.net/NWXFn/2/ but this isn't really a solution because this way, every icon should have it's own transformation matrix. – Akos K Dec 17 '13 at 15:37
  • And way do you want to do this with pure css instead of doing it in the javascript element path? – nkmol Dec 17 '13 at 15:58
  • Maintainability, simplicity, etc. This way I could just a create a CSS class `flip` which if applied on the icon will rotate it, and I can totally forget about rotating every single icon in javascript, applying that `flip` class to all of my icon instances will do that. But it seems a lot harder than I thought. – Akos K Dec 18 '13 at 08:57

0 Answers0