Font awesome icon

[laros]

Hello,

What is the difference between "svg" and "font" as an output format at font awesome icon?

Thank you!

Best regards

[Bluesman]

Hi laros. SVG is a vectorized object/picture and do not nead any font downloaded, just the .svg file. Font awesome is a font file with all library and is much heavier and nead the fontfiles downloaded, if you use font awesome the fontfiles will be downloaded automatic with the project.

[laros]

What would you suggest me to do, use the output format "svg" or "font"?

I have font awesome icons for menu icons and for facebook and twitter icons?

thank you!

[Bluesman]

What would you suggest me to do, use the output format "svg" or "font"?

I have font awesome icons for menu icons and for facebook and twitter icons?

thank you!

Depends some how the status of the site weight (size mb) is. If you have a lot of installed fonts, photos and graphics that make the site very heavy and you want it to load as fast as possible... convert to .svg.
If the site is quite small and not so heavy, use the Font Awesome.

[gofrank]

Note that some older browsers do not support .svg.

[heynen]

I want to use a Font Awesome Icon, as a single .svg file that I put on my server.

So far, it does not work:

I have used "font awesome icon" from the toolbox, chosen the "paper plane solid" icon, and then the "publish as svg" option.

WWB did not output an .svg-file itself. So I tried putting the "paper-plane-solid.svg" to the root directory of my website, but this did not work.

What am I doing wrong?

[crispy68]

I believe the .svg is encoded into the html code inline and not saved as an image. Do a simple test...blank project, insert icon, set it to publish as an .svg and then preview. Look at the source code and you will see the svg code in the html.

[heynen]

thanks already, I will check!

Now, at startup, I am getting "missing ttf file Font Awesome".
How can I fix that? I have reinstalled WWB, but that did not help.

[Pablo]

Maybe you have changed the system folder?

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=76719

[heynen]

Thanks! That hint solved the problem! The system folder was at the right place, but I had manually created a subfolder called "FontAwesome", and the program was probably searching for the TTF-file inside that folder. Folder deleted = error message gone.

I am still not sure how to solve my original problem:

When I choose "publish as font", the symbol is displayed correctly, but have these huge font files on my web server (and I only need 5 symbols)
When I choose "publish as SVG", the "padding" around the symbols does not work. So if I activate the "border" around the symbol, there is no space between symbol and border. If you want to have a look: https://www.freiblatt.de/test/index.php, at the very bottom of the page.

In the source code of the page, I see the following (that is for the tea cup symbol).

Code: Select all

<svg id="FontAwesomeIcon5" height="100%" width="100%" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <g transform="scale(0.01)">
   <path transform="rotate(180) scale(-1,1) translate(0,-1536)" d="M1664 896q0 80 -56 136t-136 56h-64v-384h64q80 0 136 56t56 136zM0 128h1792q0 -106 -75 -181t-181 -75h-1280q-106 0 -181 75t-75 181zM1856 896q0 -159 -112.5 -271.5t-271.5 -112.5h-64v-32q0 -92 -66 -158t-158 -66h-704q-92 0 -158 66t-66 158v736q0 26 19 45t45 19h1152q159 0 271.5 -112.5t112.5 -271.5z"></path>
   </g>
</svg>

[crispy68]

Yes, it does look like the padding is not taken in account when saving as a .svg. Not sure if a bug or just no possible. So if you need the border and padding, do it as a font. IMHO, based on your page, it will not take that long to load the font file and once loaded will reside in the users cache for other pages.