3 ms·
No CDN, but there's multiple repos of people taking the FontAwesome icons and converting them over to SVG. Here's the one I used: https://github.com/encharm/Fo
by michaelbuckbee 9y ago
No CDN, but there's multiple repos of people taking the FontAwesome icons and converting them over to SVG.
Here's the one I used: https://github.com/encharm/Font-Awesome-SVG-PNG https://github.com/encharm/Font-Awesome-SVG-PNG
Also, the new "Font Awesome Pro" comes with all icons as SVG out of the box - https://fontawesome.com/ https://fontawesome.com/
Last, one annoyance (in the midst of many benefits) of using SVG instead of fonts as icons is that you can't change their color via CSS if you're including them via <code>img src='file.svg'</code>
So I use BoxySVG. Boxy is to Illustrator as Acorn or Pixelmator are to Photoshop. A tightly focused editor that lets you do simple things (like edit colors) very rapidly and doesn't bog you down with a ton of extraneous features.
https://boxy-svg.com/ https://boxy-svg.com/
- MayeulC 9y agoI am pretty sure you can change a lot of SVG properties trough CSS (use "currentColor" to change the color, for example). There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.
- michaelbuckbee 9y agoSo the distinction is inlining SVGs vs referring to them like you would a png with an img src=filepath.svg|png in your HTML. It's handy to just treat them as you would images, but you lose some flexibility wrt being able to manipulate them via CSS b/c the browser now "thinks" of them like an image. This SO post has a clever workaround (with I'm sure more caveats wrt performance, etc) that will auto-inline your svgs that you need to manipulate so you can get a best of both worlds type situation going. https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color https://stackoverflow.com/questions/24933430/img-src-svg-cha...