# Are icon fonts like Font Awesome necessary?
**URL:** https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953
**Category:** UX
**Created:** [2015 年7 月 10 日 14:54 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953 "2015-07-10T14:54:18Z")
**Posts on this page:** 14
**Page:** 2
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2015 年7 月 13 日 18:08 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/25 "2015-07-13T18:08:11Z")
Here’s a good comparison of inline SVG and icon-fonts.
> **[Inline SVG vs Icon Fonts \[CAGEMATCH\] | CSS-Tricks](https://css-tricks.com/icon-fonts-vs-svg/)**
>
> If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites.
The issue with inline SVG is that it isn’t supported in IE8 and lower. Otherwise, it should result in a smaller overall file size compared to downloading all the fontawesome icons.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2015 年7 月 13 日 18:14 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/26 "2015-07-13T18:14:23Z")
Ah, I remember that article (from a while ago), thanks for the reminder.
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2015 年7 月 13 日 18:33 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/27 "2015-07-13T18:33:36Z")
We don’t need to support anything below IE9.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2015 年7 月 13 日 18:35 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/28 "2015-07-13T18:35:49Z")
Which gives stronger argument for SVG over Font-Awesome based on that article.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2015 年7 月 13 日 19:01 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/29 "2015-07-13T19:01:02Z")
I just installed Dyslexie for testing purposes. First of all it’s quite annoying to install as you need to provide a home address before you can download it!
The installation recommends Firefox, but the instructions are out of date with the latest Firefox so I had to figure that out myself. Finally, I discovered that they make it work by having it override _all_ fonts. So we can’t provide the fix @riking suggested into core as it is ignored.
I am not sure we should be bending over backwards for a solution to this proprietary font that forces people to make drastic changes to their browsing experience. I would be much more in favor of something open and standard such as adding WAI-aria tags.
Having said that, if someone wants to do the work to switch our icons to SVG and the PR shows that the performance does not degrade we would certainly accept it.
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2015 年7 月 13 日 19:09 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/30 "2015-07-13T19:09:59Z")
> [@eviltrout](#):
>
> So we can’t provide the fix @riking suggested into core as it is ignored.
Try turning off the “override all fonts” setting and applying my CSS… does that work?
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2015 年7 月 13 日 19:25 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/31 "2015-07-13T19:25:51Z")
If you turn off “override all fonts” it doesn’t display at all on Discourse.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2015 年7 月 13 日 23:19 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/32 "2015-07-13T23:19:06Z")
I like to think I am fairly good at imagining what an icon looks like by its name eg.
fa-book
fa-envelope-alt
fa-check
fa-eye-close
etc.
True not all are named so intuitively. But I think after hearing them or seeing that as alt a few times most would catch on
---
### Author:  [@soviut](https://meta.discourse.org/u/soviut)
#### Post date: [2015 年7 月 15 日 20:23 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/33 "2015-07-15T20:23:24Z")
SVGs are vector-based, like fonts, so they can be scaled to any size. This also means the exact same geometry a font icon uses can be used in an SVG. They can be made to be responsive in terms of scaling, but also in terms of complexity.
> **[How To Solve Adaptive Images In Responsive Web Design — Smashing Magazine](https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/)**
>
> Some people waste bandwidth by sending high-resolution images to all devices. Others send regular-resolution images, looking less crisp on high-resolution displays. But what we really want to do is find the one solution that sends the image with the...
> **[SVG and responsive images](http://soqr.fr/testsvg/object-abs-svg-mq-bg.php)**
As far as file/download size, SVGs use a human readable XML variant so they can be slightly more verbose than, say, a binary file. There are ways of minifying them significantly. Traditional sprite sheeting techniques can be used with SVGs or the aforementioned “clown car” technique can also be applied for creating sprite stacks.
The only downside to SVGs over fonts that I’ve ever run into is that you can’t easily style inline SVGs the way you can fonts. For example, making them take on a different colour, text shadow, etc. This is often offset by the fact that you can use multiple colours in the icons, unlike fonts which are monochrome.
---
### Author:  [@Stomme\_poes](https://meta.discourse.org/u/Stomme_poes)
#### Post date: [2015 年7 月 23 日 13:48 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/34 "2015-07-23T13:48:44Z")
> [@codinghorror](#):
>
> What happens if you disable images and thus SVG?
You leave the site, because stuff stops working.
Pretty simple solution, one I’ve used plenty of times.
> [@cpradio](#):
>
> Can’t you use aria attributes to provide the accessibility data for font-awesome usage?
Aria is invisible to most users. Which I currently blame browser vendors for, but that’s how it is today.
---
### Author:  [@Stomme\_poes](https://meta.discourse.org/u/Stomme_poes)
#### Post date: [2015 年7 月 23 日 13:59 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/35 "2015-07-23T13:59:23Z")
> [@Mittineague](#):
>
> fa-eye-close
ok but I can’t even begin to guess what it _means_ (like, if it were on a button)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2015 年9 月 2 日 23:42 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/36 "2015-09-02T23:42:41Z")
If we use inline SVG it’s (XMLish) markup and not image based, so it’ll work with images turned off completely… and also supports the `` attribute, so if selected by a screen reader it’ll read whatever name we give the icon…
It’ll take a little work to implement, but we can include an SVG spritesheet in the head then call on icons like:
```plaintext
<svg class="icon">
<use xlink:href="#discourse" />
<title>Discourse logo
```
On a basic level we can generate a spritesheet of all the fontawesome icons we use today and include that file; down the road it’s probably totally possible to point to a folder of individual svg files and compile them into a spritesheet, so in theory we could have a feature where uploading new SVG icons and generating spritesheets is baked in?
---
### Author:  [@mlinksva](https://meta.discourse.org/u/mlinksva)
#### Post date: [2016 年12 月 3 日 19:51 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/37 "2016-12-03T19:51:44Z")
[Writeup](https://github.com/blog/2112-delivering-octicons-with-svg) of a big site that switched from icon fonts to SVG early 2016.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2019 年9 月 11 日 01:27 UTC](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953/38 "2019-09-11T01:27:21Z")
我们成功了！[Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643)
[Previous page](https://meta.discourse.org/t/are-icon-fonts-like-font-awesome-necessary/30953.md?page=1)