1482370 - Change all in content icons from font-awesome to SVG

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, defect, P1)

Description

[Schalk Neethling [:espressive]]

All icons that lives in the page templates has been switched to using a SVG icon system instead. The next phase is to switch all in content (i.e. user created/generated content) icons to use the SVG icon system.

This bug is focused on icons that are controlled from the Kuma codebase. Work on Macros will be done separately.

Some relevant notes from research done by jwhitlock in https://bugzilla.mozilla.org/show_bug.cgi?id=1451261#c7

"""
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
"""

Comment 1

[Schalk Neethling [:espressive]]

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