Skip to main content

Return to Answer

deleted 43 characters in body
Source Link
TylerH
TylerH
  • 21.3k
  • 84
  • 84
  • 121

Two years on after this question was asked, I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG spritesheetsprite sheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.

Here are some reasons to pick SVGs over icon fonts (also see here):

  • You're including only the icons that you want, obviously.
  • SVG icons allow you to create multicolored icons.
  • Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
  • Font icons can be hard to position. SVGs are easy.
  • SVG icons can have baked-in titles and descriptions, which is good for accessibility.

To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.

FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.

Two years on after this question was asked, I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG spritesheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.

Here are some reasons to pick SVGs over icon fonts (also see here):

  • You're including only the icons that you want, obviously.
  • SVG icons allow you to create multicolored icons.
  • Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
  • Font icons can be hard to position. SVGs are easy.
  • SVG icons can have baked-in titles and descriptions, which is good for accessibility.

To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.

FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.

I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG sprite sheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.

Here are some reasons to pick SVGs over icon fonts (also see here):

  • You're including only the icons that you want, obviously.
  • SVG icons allow you to create multicolored icons.
  • Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
  • Font icons can be hard to position. SVGs are easy.
  • SVG icons can have baked-in titles and descriptions, which is good for accessibility.

To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.

FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.

Source Link
Alexander van Oostenrijk
Alexander van Oostenrijk
  • 4.8k
  • 3
  • 25
  • 37

Two years on after this question was asked, I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG spritesheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.

Here are some reasons to pick SVGs over icon fonts (also see here):

  • You're including only the icons that you want, obviously.
  • SVG icons allow you to create multicolored icons.
  • Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
  • Font icons can be hard to position. SVGs are easy.
  • SVG icons can have baked-in titles and descriptions, which is good for accessibility.

To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.

FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.