[FrontEnd][Perf] Replace FontAwesome with SVG icons

RESOLVED FIXED

Status

P1
normal
RESOLVED FIXED
a year ago
4 months ago

People

(Reporter: espressive, Assigned: espressive)

Tracking

({in-triage})

Details

Attachments

(1 attachment)

(Assignee)

Description

a year ago
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.
(Assignee)

Comment 1

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

Comment 2

11 months ago
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

Updated

11 months ago
Status: ASSIGNED → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → FIXED

Comment 3

11 months ago
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.
(Assignee)

Updated

11 months ago
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Comment 4

11 months ago
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 6

9 months ago
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
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.
Depends on: 1482383
Depends on: 1496826

Comment 8

5 months ago
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

5 months ago
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)
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

5 months ago
Don’t forget about the inlined experimental icon.

Also, the icons in the sidebar are grey.

Comment 12

5 months ago
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
(Assignee)

Comment 13

4 months ago
Marking as resolved and keeping https://bugzilla.mozilla.org/show_bug.cgi?id=1482383 open until pages have been regenerated.
Status: REOPENED → RESOLVED
Last Resolved: 11 months ago4 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.