The iconic font and CSS toolkit
HTML CSS Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
SVGs
css
fonts
less
scss
src
.gitignore
.npmignore
CONTRIBUTING.md
Gemfile
Gemfile.lock
HELP-US-OUT.txt
README.md
_config.yml
bower.json
component.json
composer.json
package.json

README.md

Font Awesome SVGs

Doing a lot of prototyping in the past, having Font Awesome as part of my front end starter files was always really handy for quickly adding icons when I was building a UI.

Nowadays we are more aware that using a font to represent icons isn’t necessarily the most accessible thing to do for everyone, as Serend explains here.

So as I’m whipping up a website right at this moment I thought it a good opportunity to take the first steps to swap out the font for svgs. So…

Here’s a repo with font awesome icons as svgs

I forked the Font Awesome repo so I can keep it as up to date with the original as I can.

I added an SVG folder to add all the generated glyphs to.

I used font blast to generate SVGs from a font, a la Sara Soueidan mentions in her blog post here.

To include the SVG’s I used the CSS Inline SVG Sprites method, again described by Sara here. It seemed the easiest to integrate with the set up I already had, as I was using classes to add icons to elements.

The most long winded part was making sure I had all the correct icons - I think a good addition to this repo would be a generated spite sheet with stylesheet companion and easy reference classes. I’ve opened an issue 😎

———————————————

All Font Awesome licensing etc… still applies. Info etc… is in the origin readme here