Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-40759

Use the Font Awesome icon font for all icons in Moodle

XMLWordPrintable

    • MOODLE_25_STABLE, MOODLE_33_STABLE
    • MOODLE_33_STABLE
    • MDL-40759-master
    • Hide

      1. Check all the font-icon mappings exist (except for fa-spacer)

      Run 

      git grep "fa-"|grep php|cut -d\' -f4|sort|uniq

      to get the defined mappings in php.
      Run 

      git grep "^\.fa-" lib/fonts/|grep -v "("|cut -d: -f2|sed -e s/\\.//g|sort|uniq

      to get the supported list of font-awesome icons.

      Diff the 2 and check for any in the first list that are not in the second (except fa-spacer).

      Use boost theme: turn editing on on the course page. Verify icons on the page are darker and crisper than normal and are not generated with image tags. Verify drag / drop handles work correctly. Verify icons in menus have nice alignment. Verify clicking on group mode will toggle through 3 states with different icons. Verify hiding sections functions correctly.

      Edit a course section. Verify the Atto editor has nice icons.

      Enable all atto plugins via admin.

      Verify that all icons in the atto toolbar now show with nice font awesome icons.

      Go to course competencies page. Verify drag and drop handles on competencies (and everywhere) are new icons.

      Read dev docs: https://docs.moodle.org/dev/Moodle_icons#Font_awesome_icons

      Verify they make sense to you.

      Show
      1. Check all the font-icon mappings exist (except for fa-spacer) Run git grep "fa-"|grep php|cut -d\' -f4|sort|uniq to get the defined mappings in php. Run git grep "^\.fa-" lib/fonts/|grep -v "("|cut -d: -f2|sed -e s/\\.//g|sort|uniq to get the supported list of font-awesome icons. Diff the 2 and check for any in the first list that are not in the second (except fa-spacer). Use boost theme: turn editing on on the course page. Verify icons on the page are darker and crisper than normal and are not generated with image tags. Verify drag / drop handles work correctly. Verify icons in menus have nice alignment. Verify clicking on group mode will toggle through 3 states with different icons. Verify hiding sections functions correctly. Edit a course section. Verify the Atto editor has nice icons. Enable all atto plugins via admin. Verify that all icons in the atto toolbar now show with nice font awesome icons. Go to course competencies page. Verify drag and drop handles on competencies (and everywhere) are new icons. Read dev docs: https://docs.moodle.org/dev/Moodle_icons#Font_awesome_icons Verify they make sense to you.

      "Font Awesome" is a rapidly growing and maturing, open source icon font and toolkit:

      http://fortawesome.github.io/Font-Awesome/

      This could be used for all icons in Moodle (or all icons in Clean theme).

      The benefits include:

      • easy recoloring
      • CSS hover effects
      • smaller, faster downloads
      • the ability to use a CDN hosted version
      • large and growing selection of high quality icons
      • they are open to contributions of our education specific icons
      • spinning and rotating versions
      • easy for Moodle users to enhance their content with icons
      • It's used by default in YUI pure css framework and a very popular alternative to Bootstrap's Glyphicon icon-sprite

      The Essential theme is a great example of the flexibility of Font Awesome and how it can be put to use in Moodle.

      https://github.com/moodleman/moodle-theme_essential

      The video linked from there explains some of the clever uses the author of the theme has found for the font.

      It is very easy to replace the purely decorative icons in Moodle that are applied as CSS backgrounds (e.g. the "course" icon on course listings).

      It is easy to replace the purely decorative icons that are created as an img with no alt tag by a renderer (e.g. the icons on the settings/administration and navigation block).

      It a bit trickier to replace icons that currently have alt tags for accessibility, but a good solution should be possible.

      The areas where the icons are hardcoded as imgs, then things are trickier. Converting them to use renderers is probably a good idea anyway and makes things simpler. It is also possible to use advanced CSS to reach these areas if necessary.

      Finally, there are some javascript routines that rely on finding an img tag and which break if you replace that with an icon font tag (e.g. hide/show activity icon) but that's a fairly simple change to the javascript.

      The above tasks could be done one at a time and achieve gains at each step.

      Font Awesome is backwards compatible with the glyphicons that are currently included in Bootstrapbase/Clean, though not currently used at all in the Moodle interface.

        1. 0001-DO-NOT-INTEGRATE.patch
          1 kB
        2. 0001-MDL-40759-icons-Fix-the-core_renderer-spacer-paramet.patch
          1 kB
        3. after.png
          after.png
          26 kB
        4. before.png
          before.png
          26 kB
        5. doesnt_seem_awesome.png
          doesnt_seem_awesome.png
          98 kB
        6. Screen Shot 2017-03-22 at 09.09.51.png
          Screen Shot 2017-03-22 at 09.09.51.png
          12 kB
        7. test.php
          1 kB
        8. workshop_icons.png
          workshop_icons.png
          78 kB

            Votes:
            29 Vote for this issue
            Watchers:
            28 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.