Skip to main content ↑ ↓
convert a font awesome icon to SVG? Started by TE · · Read 5948 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

convert a font awesome icon to SVG?

This question is maily for @Vekseid ..

How do you convert a font awesome icon to SVG?

I tried to copy the directions from the font-awesome.svg library and placed them in my CSS file, the icon was the right one  (yeah) but the dimensions were totally different (very small compared to the others).

Is there a guide / docu available?
Thorsten "TE" Eurich
------------------------

Re: convert a font awesome icon to SVG?

Reply #1 –

What is the benefit of doing so ? I thought font icons are scalable.

Re: convert a font awesome icon to SVG?

Reply #2 –

Quote from: meetdilip – I thought font icons are scalable.
yep, they're scalable but the initial picture dimension should be the same as the others..
Thorsten "TE" Eurich
------------------------

Re: convert a font awesome icon to SVG?

Reply #3 –

Odd, I didn't see the mention >>

I wrote a node script:
https://github.com/Vekseid/FontReaper

Currently using the out-content.css

Be careful how you copy things - some browsers require certain characters to be encoded. The format I have built into the index_light.css file is very intentional. Outer quotes must be double quotes. Inner quotes must be single quotes. < and > characters need to be encoded.

# might require encoding as well, but I honestly didn't check that. Need to do so >>

Re: convert a font awesome icon to SVG?

Reply #4 –

@TE @Spuds @emanuele do you get mention notifications? >_>

Re: convert a font awesome icon to SVG?

Reply #5 –

I got this just fine ... also received my desktop notification

Re: convert a font awesome icon to SVG?

Reply #6 –

Quote from: Vekseid – @TE @Spuds @emanuele do you get mention notifications? >_>
IIRC I had to re-enable the notification after the upgrade (1.0 to 1.1)
Thorsten "TE" Eurich
------------------------

Re: convert a font awesome icon to SVG?

Reply #8 –

Quote from: Vekseid – Be careful how you copy things - some browsers require certain characters to be encoded. The format I have built into the index_light.css file is very intentional. Outer quotes must be double quotes. Inner quotes must be single quotes. < and > characters need to be encoded.
Wasn't there a bug report or topic somewhere about whether they should maybe just be files instead of embedded in the CSS?

Re: convert a font awesome icon to SVG?

Reply #9 –

I know you brought up using fragment ids, which requires a different tag to function in Safari, so we'd have to do browser detection and swap html tags.

Part of the reason for this method is the similarity to the icon method.

Eventually I would love to go with fragments, though. Right now I'm mostly concerned with replacing the remaining icons. Mass tech switches are easy when you can write a script to do it for you. Goal is to get us to that point. >_>