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.
7. As the icons will be inlined, there are no HTTP requests
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
Status: ASSIGNED → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → FIXED
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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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
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)
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
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
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.
Don’t forget about the inlined experimental icon. Also, the icons in the sidebar are grey.
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
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 ago → 4 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.