Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Changing Font Awesome Icon Color

Standard

The standard with which Michigan Virtual courses need to comply. 

When including icons in Brightspace pages, developers will adhere to Michigan Virtual branding standards and the style guidelines outlined in the most up-to-date version of the HTML Templates course pages.

 

Requirements 

What exactly do course developers need to include in order to comply with this standard?

Developers must recolor any free stock icons they wish to use in the context of a Michigan Virtual course. They must use only Michigan Virtual or a partner’s brand colors to do so. This Style Guide entry outlines specific steps for changing icon color for use in Brightspace pages in professional learning courses. For style guidance on choosing icons and stock imagery, see the Images & Icons entry.

 

Implementation 

How can course developers implement this standard? What is the process for doing so?

After building a page using one of the HTML features of the BS24 Templates that require icons, you must swap out the existing placeholder icons for some that suit the meaning of the content of the page. 

Locating an Icon

  1. Navigate to https://fontawesome.com/icons.
  2. Type in a keyword for the kind of icon you’re searching for (e.g., “internet,” “portfolio,” “computer,” or “arrow”)
  3. Before browsing icons, select “Free” at the top of the results section. 
  4. Browse icons, and click on one that you’d like to use.
  5. Select the icon to open a popup window.
  6. In the lower left corner of the icon section of the window, find the “Show Styling Tools” button (a paint palette icon). Click it to open the styling tools panel. 
  7. Select the rainbow-colored option to the far right of the displayed color swatches. This opens a color chooser panel. 
  8. You can choose the color code type (RGB, CMYK, HEX) at the bottom.
    1. Most often, you’ll need a white icon, but sometimes you may need the icon to be a specific Michigan Virtual brand color. Copy that color’s hex code from the Michigan Virtual branding page, then paste it into the color selector. 
  9. Use the download button in the upper right corner of the popup window to download the .svg file to your computer in an appropriate folder. 
  10. Return to your course, navigate to Course Admin > Manage Files, and make a folder to house icons for this course.
  11. Upload your new icon into that folder in your course.
  12. Inside the page you built that contains placeholder icons, select the “Insert Stuff” button.
  13. Navigate to the folder you housed the icon inside of earlier using the dialog box that appears. 
  14. Select the icon using the radio button to its left and click “Next”.
  15. At the top of the next panel of this dialog box, there is an image location code that you must now select and copy.
  16. Important: Do not click “Insert” at this stage. Instead, click “Cancel”. 
  17. Now, back in the page editing panel, select the placeholder icon you need to replace.
    1. Doing this places your cursor in the same position when you open the source code editor. You are not required to do this part, but it makes the next step easier. 
  18. Paste the new image’s location code in place of the existing img src code. 
    1. Include alt text only if the icon is essential to all learners’ understanding of the content on this page. 
  19. Click “Save” to save the changes you just made to the code. Ensure that the icon has been replaced and displays properly. 
  20. When you’re finished editing the page, click “Save & Close” to save all the changes you made to the page. 

 

Resources

What resources would help a developer implement this standard appropriately?

This Icon Color Change Video Tutorial explains everything you need to know to change icon color without using vector art editing software like Adobe Illustrator.