1451261 - [FrontEnd][Perf] Replace FontAwesome with SVG icons

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Performance, enhancement, P1)

Description

[Schalk Neethling [:espressive]]

The benefits of switching to a SVG icon system over a icon font system are numerous, for example:

1. Load only the icons you need
2. Faster load time because, see above
3. Smaller overall file size
4. Much crisper on high resolution displays
5. Offers even more design control
6. Predictable and performant

To stay consistent with the current design, the icons will still be those from the FontAwesome set, but will be inlined SVG instead of an icon font.

Comment 1

[Schalk Neethling [:espressive]]

7. As the icons will be inlined, there are no HTTP requests

Comment 2

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/bcccc8bcee2dff380c0c4025ce1cf464775ae875
Fix Bug 1451261, replace fontawesome with SVG icon system

https://github.com/mozilla/kuma/commit/19ab761cb862e0b9fed983a51127ca9f8684109d
Merge pull request #4749 from schalkneethling/bug1451261-replace-fontawesome-with-inline-svg

Fix Bug 1451261, replace fontawesome with SVG icon system

Comment 3

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/8a7a4ee49aee84dcb9e6ff9f365ce80c0b2876f6
bug 1451261: Translate action button text (#4754)

The process that extracts translations doesn't know JS. Change to call
gettext with the string directly, rather than by variable.

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/1d88ba787ba0c78916d9ac9ba86dff61654ab980
bug 1451261: Add titles to social icons

https://github.com/mozilla/kuma/commit/cd7b9ab54d7e06e8a4347693b8e27457d004dcec
Merge pull request #4756 from schalkneethling/bug1451261-add-title-to-social-icons

bug 1451261: Add titles to social icons

Comment 5

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/a734cb5b014617f7dfc6635839b78c6110dd61f1
bug 1451261: Use twitter icon for Mozilla twitter (#4760)

Comment 6

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/fb584301452d354fa7473aeb0cde8fa8f0e66c31
bug 1451261: Add jinja helper for SVG

See https://github.com/mdn/sprints/issues/23

https://github.com/mozilla/kuma/commit/4dfd83c3df01ed853111984d9084dfabd6364fd2
bug 1451261: Test include_svg Jinja2 helper

https://github.com/mozilla/kuma/commit/bbcbf0227964512fb337473a38a8637d73ac8d8d
bug 1451261: Refactor include_svg

* Use lru_cache decorator to cache results
* Use Django's loader.get_template to find the SVG by path
* Use PyQuery's namespaces to find the namespaced title
* Avoid processing the SVG markup when an override title is not given

Comment 7

[John Whitlock [:jwhitlock]]

I've looked into the remaining usage of FontAwesome.

Font Awesome 4.1 source is included as an SCSS library at kuma/static/styles/libs/font-awesome:

https://github.com/mozilla/kuma/tree/master/kuma/static/styles/libs

The Font Awesome library is included in mdn.css, which is used on every page on the site, in in kuma/static/styles/font-awesome.scss. This file also has a cross-reference of (earlier?) Font Awesome icon names, like "icon-thumbs-down-alt" to "icon-thums-o-down":

https://github.com/mozilla/kuma/blob/master/kuma/static/styles/font-awesome.scss
https://github.com/mozilla/kuma/blob/3453d1a436fa00306972a62a06049ef39ec27aaa/kuma/settings/common.py#L674-L680

It is also included in editor-content.css as styles/libs/font-awesome/css/font-awesome.min.css. This file is dynamically included by CKEditor for WYSIWYG editing of content. The path is included in JavaScript as win.mdn.assets.css.editor-content, in jinja2/includes/config.html. This allows CKEditor to use the editor-content.css, and Font Awesome, to style content in the WYSIWYG editor.

https://github.com/mozilla/kuma/blob/3453d1a436fa00306972a62a06049ef39ec27aaa/kuma/settings/common.py#L799-L809
https://github.com/mozilla/kuma/blob/3453d1a436fa00306972a62a06049ef39ec27aaa/jinja2/includes/config.html#L24-L28

Font Awesome work by repurposing the <i> element, like:

  <i class="icon-warning-sign"></i>

The CSS then applies a rule to all <i> elements:

  i[class*=" icon-"],i[class^=icon-]{
    display:inline-block;
    font-family:FontAwesome;
    font-style:normal;
    font-weight:400;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
  }

And uses a specific character based on the class:

  .icon-exclamation-triangle:before,.icon-warning:before{
    content:"\f071"
  }

MDN site search shows 9107 documents that use an icon-* class:

https://developer.mozilla.org/en-US/search?css_classname=icon-%2A

Most appear to be injected with KumaScript, for example in NonStandardBadge:

https://github.com/mdn/kumascript/blob/995a010ad7513cecc9c1e7c71ef5715793877317/macros/NonStandardBadge.ejs#L47

Macros that inject Font Awesome icons:

* FontAwesomeIcon. Generic, used by one other macro:
  - HTMLRefTable - icon-thumbs-down-alt, icon-beaker, icon-cogs
* DeprecatedBadge - icon-thumbs-down-alt. Used by:
  - InterfaceOverview
  - SidebarUtilities
  - ListSubpagesForSidebar
  - CSSRef
  - jsindex
  - FirefoxOSAPIRef
  - deprecated_inline
  - ListGroups
  - APIListAlpha
  - APIRef
  - JSRef
* ObsoleteBadge - icon-trash, used by many like DeprecatedBadge
* NonStandardBadge - icon-warning-sign, used by many
* PreviousMenuNext - icon-arrow-left, icon-arrow-right, icon-arrow-up. Used by NextMenu
* ExperimentalBadge - icon-beaker. Used by many

Some usage is in the wiki content and not injected by macros. This Django shell command gathers <i class="icon-*"> usage outside of KumaScript macros:

  from pyquery import PyQuery as pq
  docs = Document.objects.exclude(is_redirect=True).filter(current_revision__content__contains="<i ")
  icons = {}
  for doc_id in docs.values_list('id', flat=True):
    doc = Document.objects.get(id=doc_id)
    parsed = pq(doc.current_revision.content)
    for icon in parsed('i[class*=" icon-"],i[class^=icon-]'):
      for cls in icon.classes:
        if cls.startswith('icon-'):
          full_url = doc.get_full_url()
        i  cons.setdefault(cls, []).append(doc.get_full_url())

  for name, docs in icons.items():
    print name, len(docs)

The usage is:

  icon-trash 216
  icon-weather 1 - https://developer.mozilla.org/sq/docs/Mozilla/Marketplace/Options/Open_web_apps_for_android
  icon-anchor 1 - https://developer.mozilla.org/es/docs/User:davidwalshES
  icon-thumbs-down-alt 181

Font Awesome is included with Django REST Framework (DRF), and is collected by ./manage.py collectstatic. We don't use the default DRF templates, so we don't use this in production. We could stop collecting these assets, but that would be part of a different project.

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mdn/kumascript

https://github.com/mdn/kumascript/commit/05cff42790ee708d94bcd3837fa3860863a816f4
Bug 1451261, add class to macros for use in custom styling

https://github.com/mdn/kumascript/commit/9a2f008cd6dbdfa4020c0c1d575be06d5e61a19b
Merge pull request #981 from schalkneethling/bug1451261-change-all-icons-to-svg

Bug 1451261, add class to macros for use in custom styling

Comment 9

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/6c1e25364c355b095dd87daba995f4a388b36eeb
Bug 1451261: Complete change to svg icon system, remove FontAwesome lib (#5058)

Comment 10

[John Whitlock [:jwhitlock]]

Pushed to production. To get the colors for inlined non-standard and trash icons, we'll need to regenerate pages that use these icons. Unfortunately, there are many, including many of the sidebars.

Comment 11

[ExE Boss]

Don’t forget about the inlined experimental icon.

Also, the icons in the sidebar are grey.

Comment 12

[[github robot]]

Commit pushed to master at https://github.com/mdn/kumascript

https://github.com/mdn/kumascript/commit/7faa11e130126276fad147cf4d88c9b4c36b9dac
CSS Scrollbars is at FPWD (#978)

* CSS Scrollbars is at FPWD

* Display is now a CR

* Bug 1451261, add class to macros for use in custom styling

* moving the accessiblity inspector to be a core tool (#973)

* moving the accessiblity inspector to be a core tool

* fixing casing of Accessibility Inspector, as per wbamberg comment

* trying this again

* changing scrollbars to WD

* Add newline

Comment 13

[Schalk Neethling [:espressive]]

Marking as resolved and keeping https://bugzilla.mozilla.org/show_bug.cgi?id=1482383 open until pages have been regenerated.

Comment 14

[ExE Boss]

Attachment: Kuma: Fix margin of sidebar icons

Comment 15

[ExE Boss]

Attachment: KumaScript: Add missing `.icon‑only‑inline` classes

This was missed by Schalk Neethling in mdn/kumascript#981.

Comment 16

[ExE Boss]

Attachment: Kuma: Fix {{Experimental_Inline}} indicator icon