Implementing Icons
The login area for Cascade is https://tamiu.cascadecms.com/.
Why Use an Icon?
Icons modernize a webpage and serve as a focal point to grab users' attention. Icons are near-universal design elements. By adding them to your content, you provide a recognizable visual shorthand for visitors-- making it easier for them to process the information displayed. Take a look at the impact icons have on content:
Hobbies
- Chess
- Table Tennis
- Painting
Hobbies
Chess
Table Tennis
Painting
Essential Code Snippet
To use icons within a webpage, coding must be used.
TAMIU's Cascade system uses the following code format for adding icons to its pages. The bolded text are the edits that must be made to correctly implement the desired icon.
<span aria-hidden="true" class="fa-style fa
fa-name"><span class="sr-only">Icon Name</span></span>
By making three edits, the code is modified to properly render the book icon.
<span aria-hidden="true" class="fa-solid fa
fa-book"><span class="sr-only">Book Icon</span></span>
Which renders:
Choosing an Icon (via Font Awesome)
Font Awesome is the University's choice for icons . Visit their icons page to find icons that best fits your content. All icons—free and pro—can be used on University webpages.
Once you've found an icon, click on it and you will be directed to its designated web page that has a "Start Using This Icon" button. Click on the button and a window with code content will appear, similar to the image below.
Using the code format example from above, make the necessary changes. If using the camera-retro icon, the updated code snippet should look like this:
<span aria-hidden="true" class="fas fa
fa-camera-retro"><span class="sr-only">Retro Camera Icon</span></span>
Changing an Icon's Size
Sometimes an icon may need to be increased in size. To do so, update your icon code with one of the following options below to increase its size accordingly.
fa (default size)
Twitter Icon
fa-2x
Twitter Icon
fa-3x
Twitter Icon
fa-5x
Twitter Icon
fa-7x
Twitter Icon
fa-9x
Twitter Icon
In the example below, the code is updated to increase the icon to five times its original size. The change is bolded.
Original Code:
<span aria-hidden="true" class="fa-solid fa
fa-camera-retro"><span class="sr-only">Retro Camera Icon</span></span>
Updated Code:
<span aria-hidden="true" class="fa-solid fa-5x
fa-camera-retro"><span class="sr-only">Retro Camera Icon</span></span>