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

Update icon_map with the latest icons from Font Awesome 6 (core)

XMLWordPrintable

    • MOODLE_405_STABLE
    • MOODLE_405_STABLE
    • MDL-82497-main
    • Hide

      Scenario 1. Component library

      1. Run  

        grunt componentlibrary

      2. Login as admin
      3. Go to Site administration > Development > UI Component library
      4. Search for the icons page and load it (admin/tool/componentlibrary/docspage.php/moodle/components/moodle-icons)
      5. Compare the icons starting with core: of this page with the ones in https://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/moodle/components/moodle-icons and check that the SVG image (on the right) has been updated and is the same as the FontAwesome icon (on the left).
        • The plugins icons will be updated in MDL-82211 so they can be ignored here.
        • A few icons will be deprecated in MDL-82460 (like core:e/row_props or core:i/mahara_host). It's OK if any of the icons listed in MDL-82460 and the SVGs are not the same.
        • Custom icons will be created in MDL-82218 (like core:e/insert_col_after or core:e/insert_col_before).  It's also OK if any of the icons listed in MDL-82218 and the SVGs are not the same.
        • core:i/navigationitem it's a special FA class, so it's also OK if the icon and the SVG are different.

       

      Scenario 2. Icons changed for consistency

      1. Login as admin.
      2. Open the message drawer.
      3. Confirm the icon displayed near the search box is a cog.
      4. Go to the My courses page and enable edit mode.
      5. Confirm two kebab menus are displayed.
      6. Confirm the menu aligned with the "Course overview" title doesn't contain a caret (these kebab menus will be reviewed in MDL-82500 so for now it's OK to leave them unaligned).
      7. Go to Home page.
      8. Check the icon displayed below the secondary menu is a cog (instead of a pen).
      9. Access the Content bank.
      10. Confirm the icon for displaying H5P content details is a list (similar to what is displayed in the Private files).
      11. Create a course.
      12. Open the actions menu for any section and for the Announcements forum and confirm that, the Edit settings icon uses a cog icon.
      13. From the admin user profile, access Reports.
      14. Create a new report (select any of the sources, for instance Course).
      15. Confirm the chevron displayed on the left is smaller than in a Moodle without the patch.
      16. Close the report.
      17. Open the actions menu for the report you just created.
      18. Confirm the icon for Edit report details is a cog.

       

      Scenario 3. SVG icons instead of FontAwesome

      1. Edit theme/boost/config.php and comment the following line: 

        $THEME->iconsystem = \core\output\icon_system::FONTAWESOME;

      2. Purge all caches.
      3. Visit a few pages and confirm the icons are displayed properly. 
      4. If you inspect any of these icons, confirm that <img class="icon" is used for displaying them (instead of <i class="icon ...).
      Show
      Scenario 1. Component library Run  grunt componentlibrary Login as admin Go to Site administration > Development > UI Component library Search for the icons page and load it (admin/tool/componentlibrary/docspage.php/moodle/components/moodle-icons) Compare the icons starting with core: of this page with the ones in https://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/moodle/components/moodle-icons and check that the SVG image (on the right) has been updated and is the same as the FontAwesome icon (on the left). The plugins icons will be updated in MDL-82211 so they can be ignored here. A few icons will be deprecated in MDL-82460 (like core:e/row_props or core:i/mahara_host). It's OK if any of the icons listed in MDL-82460 and the SVGs are not the same. Custom icons will be created in MDL-82218 (like core:e/insert_col_after or core:e/insert_col_before).  It's also OK if any of the icons listed in MDL-82218 and the SVGs are not the same. core:i/navigationitem it's a special FA class, so it's also OK if the icon and the SVG are different.   Scenario 2. Icons changed for consistency Login as admin. Open the message drawer. Confirm the icon displayed near the search box is a cog. Go to the My courses page and enable edit mode. Confirm two kebab menus are displayed. Confirm the menu aligned with the "Course overview" title doesn't contain a caret (these kebab menus will be reviewed in MDL-82500 so for now it's OK to leave them unaligned). Go to Home page. Check the icon displayed below the secondary menu is a cog (instead of a pen). Access the Content bank. Confirm the icon for displaying H5P content details is a list (similar to what is displayed in the Private files). Create a course. Open the actions menu for any section and for the Announcements forum and confirm that, the Edit settings icon uses a cog icon. From the admin user profile, access Reports. Create a new report (select any of the sources, for instance Course). Confirm the chevron displayed on the left is smaller than in a Moodle without the patch. Close the report. Open the actions menu for the report you just created. Confirm the icon for Edit report details is a cog.   Scenario 3. SVG icons instead of FontAwesome Edit theme/boost/config.php and comment the following line: $THEME->iconsystem = \core\output\icon_system::FONTAWESOME; Purge all caches. Visit a few pages and confirm the icons are displayed properly.  If you inspect any of these icons, confirm that <img class="icon" is used for displaying them (instead of <i class="icon ... ).
    • 3
    • HQ 2024 Planning I3 Moppies

      In MDL-77754, the UX team has been reviewing the Font Awesome (FA) icons and deciding the best way to update them, taking advantage of the new ones in Font Awesome 6.

      This issue should update the icons with the new proposals but, for now, no icons will be removed/deprecated (this issue is only for replacing the old with the new ones defined in the Figma icon library).

      For instance:

      • core:t/assignroles should replace 'fa-user-circle' with 'fa-user-tag'.
      • core:e/insert_edit_video should replace fa-file-video-o with 'fa-file-video fa-regular'.

       

      This issue is to update icons defined by plugins implementing the get_fontawesome_icon_map function. The icons in the moodle/pix folder will be updated in MDL-82211.

        1. (2) 10 Passed -- (Main)MDL-82497.png
          (2) 10 Passed -- (Main)MDL-82497.png
          41 kB
        2. (2) 12 Passed -- (Main)MDL-82497.png
          (2) 12 Passed -- (Main)MDL-82497.png
          63 kB
        3. (2) 15 Passed -- (Main)MDL-82497.png
          (2) 15 Passed -- (Main)MDL-82497.png
          95 kB
        4. (2) 18 Passed -- (Main)MDL-82497.png
          (2) 18 Passed -- (Main)MDL-82497.png
          77 kB
        5. (2) 3 Passed -- (Main)MDL-82497.png
          (2) 3 Passed -- (Main)MDL-82497.png
          30 kB
        6. (2) 6 Passed -- (Main)MDL-82497.png
          (2) 6 Passed -- (Main)MDL-82497.png
          63 kB
        7. (2) 8 Passed -- (Main)MDL-82497.png
          (2) 8 Passed -- (Main)MDL-82497.png
          57 kB
        8. (3) 4 Passed -- (Main)MDL-82497.png
          (3) 4 Passed -- (Main)MDL-82497.png
          528 kB
        9. image-2024-07-25-10-01-54-173.png
          image-2024-07-25-10-01-54-173.png
          142 kB
        10. image-2024-07-25-10-27-42-087.png
          image-2024-07-25-10-27-42-087.png
          15 kB

            sarjona Sara Arjona (@sarjona)
            sarjona Sara Arjona (@sarjona)
            Laurent David Laurent David
            Amaia Anabitarte Amaia Anabitarte
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 25 minutes
                1d 25m

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