We have a handful of icons in core that are currently images. We should replace these with an icon font instead.

Up-sides of using an icon font in core:

1) A complete set of matching core icons This leads to increased consistency in the look/feel of core icons. 1) Core won't need design resources or to spend much time adding new icons when they are needed. 1) Better User eXperience due to ease of adding an icon wherever one is needed. Providing matching icons in core will make a prettier and more usable product. 1) Contrib icons could easily match core look/feel provide a standard that contrib can adopt for adding icons where needed. 1) Better Developer eXperience for all backdrop site owners. provide a built-in utility for site builders to easily add an icon where needed. 8) Contrib/Custom projects won't need design resources Contrib and custom projects also don't need design resources (or to spend time) adding new icons 1) Beautiful vector icons on all browsers. All icons on all browsers will scale beautifully. 1) Change color and resize using CSS alone. Contrib and custom projects can color and size any icon appropriately using CSS alone. 1) No messy SVG fall-back code. If we can switch to using an icon font, we won't need 2x the CSS to account for browsers that can render SVGs and those that can't. 1) Accessible icons Unlike background-image icons, HTML based icons would be accessible.

Down-sides of using an icon font in core:

1) Markup changes would be necessary for accessible icons. 1) We'd be depending on an external library 1) It's tedious to add new icons to an icon font (example: a Backdrop logo). 1) Font file size could be larger than ideal to provide maximum utility. 1) Super fancy front-enders prefer SVGs to fonts.

Icon font libraries for consideration (and their license)

Current icons we can/should replace with new icon font icons

  • [ ] #xx | RSS feed icon
  • [ ] #xx | Admin bar
  • [ ] #xx | Dashboard
  • [ ] #xx | Messages
  • [ ] #xx | Watchdog
  • [ ] #xx | Tabledrag multi-arrow icons
  • [ ] #xx | Help icon in filter tips
  • [ ] #xx | Contextual link cog icons
  • [ ] #xx | Table header sort indicators (these could be CSS)
  • [ ] #xx | Menus: collapsed / expanded / leaf / tree (these could be CSS)
  • [ ] #xx | Add icons to the admin bar?
  • [ ] #xx | grippie? (could, arguably, be removed)
  • [ ] #xx | Status report page?
  • [ ] #xx | Available updates page?

(As we replace the use of image icons with icon fonts, let's be sure to remove the old icons too, or mark them for deletion in the 2.x branch)

Related issues:

GitHub Link: 
https://github.com/backdrop/backdrop-issues/issues/364
GitHub Issue #: 
364