-
Notifications
You must be signed in to change notification settings - Fork 12.2k
-
Notifications
You must be signed in to change notification settings - Fork 12.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG Icons #3203
Comments
You are suggesting to abandon the font-face implementation in favour of pure svg? |
Yes, but SVG are more perfomance expensive and the transition would breake up current integrations. I would suggest support both, font-face by default plus providing the SVG source file when requiring special icon interaction. The SVG code to display the flag icon would look like, after proper source file loaded, as:
The conversion from font to SVG is possible, the current icon creation workflow would not change. |
nice, is there any tool to convert from .svg font file to that format? |
In theory they are, online ones as well, but if this topic gain interest could investigate deeper and set some testing. |
@RushPL (one of the authors of https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG) |
Will that fire a notification to @RushPL? I would like his suggestions about this option |
Yes, it should. Seems very cool what he got there! Definetly, let's see what he had to say :) |
Looks interesting .. so as I understand FontAwesome-SVG-PNG should generate kind of a bundle with all glyphs with proper ID assigned? |
a kind of svg sprite? |
This article well ilustrates all the SVG advantages and the sprite tehnique, or similar one. |
fffff! |
font-awesome-svg-png@1.0.17 will generate a spritesheet with |
One note maybe, you need to use this like this:
|
Actually the viewBox here behaves a bit strangely .. anyway please test. Simple test shown 1800 to work well.. I have no idea why. |
@RushPL thanks! I will wait for @miljan-aleksic 's feedback btw I don't know if you are using semver. In that case, since you introduced a new feature, you should bump the minor and reset the patch (font-awesome-svg-png@1.1.0) and maybe add a tag so tagged versions are displayed here: https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG/releases |
Thanks, good points, done. |
Impressive @RushPL, this opens a whole new world of experimentation, let's see where it leads. I could think of a JS plugin loading the SVG, allowing to append the icons, change them, animate, interact... Really cool, thanks guys! |
I would very much welcome such a plugin if it would allow to create nice looking SVG effects simply by composing of css classes and possibly setting some |
+1 . We've got a web application currently using Bootstrap/FontAwesome, but have to support users whose security policies do not allow the downloading of custom fonts. I was planning on using the SVG sprite sheet mentioned above and was hoping there would be some way to switch to it with minimal code edits. I've been playing with it for a while now, but as different icons are different width/height, I currently need to tweak the viewbox for each set of dimensions. It's possible that I'm doing something stupidly though, and that there is some universal combination of viewBox and preserveAspectRatio that will work universally. |
Here I create SVG Font Viewer: http://jsfiddle.net/iegik/r4ckgdc0/ There are few reasons to using SVG Font as main repository file:
|
|
@iegik Cool stuff! :) Especially the fill color. Does it work across the browsers? |
@iegik thanks for sharing |
+1 And another article in favour of SVG icons: Inline SVG vs Icon Fonts. |
+1 |
2 similar comments
+1 |
+1 |
As I commented at Rush/Font-Awesome-SVG-PNG#11 (comment) changing to SVG symbols for the sprites and setting the viewBox on each symbol will alleviate the issues as run into above, where the viewBox is being set in the svg usage rather than as the default essentially. https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG defaults everything to 0 0 origin and the 1792 em units as per the font, and I'd guess it's something that might be corrected via SVGO settings, but haven't had time to dig through them. But if not in the SVGO run due to only having the font defaults for em and ascent sizing available, perhaps there's a step further back in the font production which could help with setting the viewBox easier for creating sprites. |
+1 |
For what it's worth, here's a Microsoft blog post where they suggested disabling custom fonts: https://blogs.technet.microsoft.com/srd/2011/12/13/more-information-on-ms11-087/ . I think this is what's triggered multiple organizations to mandate that custom fonts are disabled. I've run into this problem 3 times so far in my career and always fixed it with the fontawesome svg-png repo mentioned above. I've yet to find a pure css solution. For others looking to implement this workaround, here's a gist to get you started: https://gist.github.com/mattboehm/3525b5090c5568207daa09c35ae1e895 |
If you are ready to use SVG icons, you should check this out: http://leungwensen.github.io/svg-icon/#awesome not only Font-Awesome, there are more than 10,000 SVG icons out of the box. |
I think this has been addressed in Font Awesome 5 and I'm going to close here |
Hi!
I would like to propose for consideration moving the fonts to SVG. That would allow editing the icons in real time, adding very precise effects and so much more as you probably know.
I'm aware it's a big task, but wondering if there is any reason why this could be not such a good idea.
The text was updated successfully, but these errors were encountered: