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

Use the Font Awesome icon font for all icons in Moodle

    Details

    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_25_STABLE, MOODLE_33_STABLE
    • Fixed Branches:
      MOODLE_33_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-40759-master

      Description

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

        Gliffy Diagrams

          Attachments

          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

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    15/May/17