The CSS must be at the same directory level as the fonts folder. Recommended for projects where content authors need to be able to add any font inline using only HTML.Ĭopy the src/fonts folder to your web app.Ĭopy the src/icon-font.css file to your web app. Identify the icon(s) you will need for your project by id using the Icon library below.Ĭopy/paste or reference the icon in your project. Recommended for projects that use 1-9 icons. HTML Method 2 Direct download and include. As a shortcut to guide visitors to important information without structuring content strategically.If it creates visual clutter (like using too many on a page).Where an image or graphic is more appropriate.Without a label if it is not widely understood.That does not relate to the meaning or action.Up arrow icon in the back to top buttonįor a page alert, choose an icon that supports the tone of the alert.External and pdf link icons in the link icon.Hamburger icon in the site navigation menu for mobile devices.This ensures consistency, and fewer steps for content designers. Several components incorporate icons automatically. The Design System uses a standard set of icons for common actions. When it may not be clear what the icon means, pair it with a label or supporting text. Select an icon that’s as closely tied to the specific information or action as possible. Use icons for the same purpose consistently to avoid confusion for visitors and reduce cognitive load. Choose an existing icon from Version 5.6.2 of the CAGov icon library whenever possible. Organize content strategically before using icons. Use icons as visual indicators to make key actions or information easy to find. Icons reduce cognitive load by communicating meanings or actions simply and accurately. Icons are visual cues that help people find key information and common actions. Alpha components have not been thoroughly tested by developers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |