Web Fonts vs SVG
Web Fonts have been used since the earliest days of Font Awesome and are still a solid workhorse. SVG is the new kid on the block with lots of extra tricks and capabilities. Which one is right for you?
Web Fonts + CSS
Icon web fonts are just that - fonts that are made up of icons. We pair the icon font with CSS to get all the magic of Font Awesome icons to show up seamlessly in your apps, sites, and other web projects.
Superpowers:
- Easiest to set up and use
- Reliable and established technology
- Can be used in pseudo-elements in CSS to display the icon without touching HTML
- Each icon can be referenced by its unique unicode value
- Batched into subsets to improve performance
Weaknesses:
- Can’t do some of the advanced styling tricks
- Can’t do auto-accessibility (except in a kit)
SVG + JS
SVGs are vector-based images that are rendered using the browser’s engine. We pair it with javascript to invoke the magic of Font Awesome icons into your apps, sites, and other web projects.
Superpowers:
- Great for javascript-based apps when rendered through our JS packages
- Capable of some fancy tricks like masking, layering, and power transforms
- Uses the power of vectors to draw crisp icons at any size
- Easier to create custom subsets with just the icons you need
Weaknesses:
- Doesn’t come with any native rendering unless paired with our JS
- Can bog a browser down when many icons are used on a single page (but you can fix this with SVG symbols if you’re using repeating icons)
Side-by-side comparison
| Feature/Option | Web Fonts & CSS | SVG & JS |
|---|---|---|
| How Icons Render | As CSS pseudo-elements. | As SVG elements in your page’s HTML. |
| Best For | People who are used to Font Awesome’s older versions. Projects where HTML markup can’t be modified and icons must be added using CSS pseudo-elements (:before) | People who prefer to use SVGs to display icons. People who want to use advanced features like Power Transforms. |
| Upgrading Difficulty (from v4) | Similar file structure and framework as Version 4. Shim available to map v4 icon names to v5 equivalents. | Different files and references needed. Some rendering proofing is needed. Shim available. |
| Requirements | CSS and a browser that supports web fonts (leveraging @font-face). | CSS, JavaScript, and a browser that supports rendering SVGs. |
| Icon Sizing | Supported | Supported |
| Icon Rotating | Supported | Supported |
| Listed, Bordered, and Pulled Styling | Supported | Supported |
| Icon Animations | Supported | Supported |
| Stacking Icons | Supported | Supported |
| Auto-Accessibility | Not supported (except when using kits) | Supported |
| Power Transforms | Not supported | Supported |
| Masking | Not supported | Supported |
| Layering Text and Counters | Not supported | Supported |