Font Awesome Icon Tutorial
Instructions
In Cascade, there are specific modules where you can use icons, they will be marked by ICON USABLE on template instruction pages.
You can use the search feature in the table below for the different icons that are authorized by Cal Poly ÐÇ¿Õ´«Ã½ for Cascade use. Please do not use icons other than these approved ones. If you wish to request a new icon, email brand@cpp.edu
Once you have decided on an icon, copy the code section and paste it in the icons area.
Example: Clipboard Icon
1. Find icon on table, copy code from that column.
2. Paste it into the Font Awesome Icon box, then save your changes.
3. It will appear like below.
Note: You will not need to worry about color contrast, it should populate as a gold icon on a dark green background.
Icon Options
| Image | Name | Code | Long Name | Description | Link |
 |
Clipboard | <i class="fa-sharp fa-light fa-clipboard-list-check"></i> | Clipboard list check (sharp light) | Use for policies, procedures, to-dos, check lists, instructions | |
 |
House | <i class="fa-sharp fa-light fa-house"></i> | House (sharp light) | Use for homepages | |
 |
Building | <i class="fa-sharp fa-thin fa-buildings"></i> | Buildings (sharp thin) | Use for University Housing (dorms, suites) | |
 |
Warning | <i class="fa-sharp fa-light fa-triangle-exclamation"></i> | Triangle exclamation (sharp light) | Use for campus safety, alerts, warnings, crisis com | |
 |
Virus | <i class="fa-sharp fa-light fa-virus"></i> | Virus (sharp light) | Use for Covid or Safer Return related links | |
 |
Medical | <i class="fa-sharp fa-light fa-briefcase-medical"></i> | Briefcase medical (sharp light) | Use for medical-related, Student Health Services, etc. | |
 |
Heart Hand | <i class="fa-sharp fa-light fa-hand-holding-heart"></i> | Hand holding heart (sharp light) | Wellbeing, community of care, support 1 | |
 |
Heart | <i class="fa-sharp fa-light fa-heart"></i> | Heart (sharp light) | Wellbeing, community of care, support 2 | |
 |
Heart Message | <i class="fa-sharp fa-light fa-message-heart"></i> | Message heart (sharp light) | Wellbeing, community of care, support 3 | |
 |
Heart Book | <i class="fa-sharp fa-light fa-book-heart"></i> | Book Heart (sharp light) | Mental health 1 | |
 |
Heart Head | <i class="fa-sharp fa-light fa-head-side-heart"></i> | Head side heart (sharp light) | Mental health 2 | |
 |
Wifi | <i class="fa-sharp fa-regular fa-wifi"></i> | Wifi (sharp regular) | Wifi, internet, IT help | |
 |
Computer 1 | <i class="fa-sharp fa-light fa-desktop"></i> | Desktop (sharp light) | Internet, computer lab, IT help 1 | |
 |
Computer 2 | <i class="fa-sharp fa-light fa-computer"></i> | Computer (sharp light) | Internet, computer lab, IT help 2 | |
 |
Phone 1 | <i class="fa-sharp fa-light fa-phone-rotary"></i> | Phone rotary (sharp light) | Phone, contact us 1 | |
 |
Phone 2 | <i class="fa-sharp fa-light fa-phone"></i> | Phone (sharp light) | Phone, contact us 2 | |
 |
Phone 3 | <i class="fa-sharp fa-thin fa-mobile-screen-button"></i> | mobile screen button (sharp thin) | Cell phone, internet app, Billy Chat |
|
 |
Address | <i class="fa-sharp fa-thin fa-address-card"></i> | Address card (sharp thin) | Staff page, Meet the team | |
 |
Location | <i class="fa-sharp fa-light fa-location-dot"></i> | Location dot (sharp light) | Location, map, directions | |
 |
Comment | <i class="fa-sharp fa-light fa-comment"></i> | Comment (sharp light) | Comment, chat, feedback, dicussion, conversation | |
 |
Camera | <i class="fa-sharp fa-light fa-camera"></i> | Camera (sharp light) | Photography, image gallery | |
 |
Video | <i class="fa-sharp fa-light fa-video"></i> | Video (sharp light) | Video, video playlist, YouTube | |
 |
Photo | <i class="fa-sharp fa-light fa-image"></i> | Image (sharp light) | Image gallery, nature | |
 |
Alarm | <i class="fa-sharp fa-light fa-bell"></i> | Bell (sharp light) | Alarm, alert, important info, reminders, notifications | |
 |
Search | <i class="fa-light fa-magnifying-glass"></i> | Magnifying glass (sharp light) | Search, look up, research | |
 |
Calendar | <i class="fa-sharp fa-light fa-calendar-days"></i> | Calendar Days (sharp light) | Calendar | |
 |
Question | <i class="fa-sharp fa-regular fa-question"></i> | Question (sharp regular) | Question, help, information | |
 |
Drink | <i class="fa-sharp fa-light fa-mug-hot"></i> | mug hot (sharp light) | coffee with a cop, food menu, dining | |
 |
Food | <i class="fa-sharp fa-light fa-pizza-slice"></i> | pizza slice (sharp light) | pizza with the presidents, food menu, dining | |
 |
Books 1 | <i class="fa-sharp fa-light fa-books"></i> | books (sharp light) | books, library, studying, school work, academics | |
 |
Books 2 | <i class="fa-sharp fa-light fa-book"></i> | book (sharp light) | books, library, studying, school work, academics | |
 |
Newspaper | <i class="fa-sharp fa-light fa-newspaper"></i> | newspaper (sharp light) | news, news articles, publications | |
 |
<i class="fa-sharp fa-light fa-print"></i> | print (sharp light) | printing, other services (think Library, common rooms) | ||
 |
Information 1 | <i class="fa-sharp fa-light fa-circle-info"></i> | circle info (sharp light) | information 1 | |
 |
Information 2 | <i class="fa-sharp fa-light fa-memo-circle-info"></i> | memo circle info (sharp light) | information 2 | |
 |
Microphone | <i class="fa-sharp fa-light fa-microphone"></i> | microphone (sharp light) | audio, podcast, singing | |
 |
Money 1 | <i class="fa-sharp fa-light fa-file-invoice-dollar"></i> | file invoice dollar (sharp light) | money, finacial aid office, scholarships, payroll 1 | |
 |
Money 2 | <i class="fa-sharp fa-light fa-money-check-dollar-pen"></i> | money check dollar pen (sharp light) | money, finacial aid office, scholarships, payroll 2 |
|
 |
Money 3 | <i class="fa-sharp fa-light fa-sack-dollar"></i> | Sack dollar (sharp light) | money, finacial aid office, scholarships, payroll 3 | |
 |
Plant 1 | <i class="fa-sharp fa-light fa-seedling"></i> | seedling (sharp light) | agriculture, farm, grow, nature, plants, vegan, health | |
 |
Plant 2 | <i class="fa-sharp fa-light fa-hand-holding-seedling"></i> | hand holding seed (sharp light) | community, volunteer, nature, green, earth-friendly |
|
 |
Plane | <i class="fa-sharp fa-light fa-plane"></i> | plane (sharp light) | aerospace engineering, travel, study abroad, international | |
 |
Car | <i class="fa-sharp fa-light fa-car"></i> | car (sharp light) | parking services, car, autobody, mechinical engineering | |
 |
Shopping | <i class="fa-sharp fa-light fa-cart-shopping"></i> | shopping (sharp light) | bookstore, shopping, purchase, store, buy | |
 |
World | <i class="fa-sharp fa-light fa-earth-americas"></i> | earth americas (sharp light) | geography, travel, study abroad, international, | |
 |
Star | <i class="fa-sharp fa-light fa-star"></i> | star (sharp light) | space, innovation, excellence, award | |
 |
Graduation | <i class="fa-sharp fa-light fa-graduation-cap"></i> | graduation cap (sharp light) | graduation, commencement | |
 |
Ticket | <i class="fa-sharp fa-light fa-ticket"></i> | Ticket (sharp light) | ticket, commencement, eventbright, register | |
 |
Award | <i class="fa-sharp fa-light fa-award"></i> | Award (sharp light) | award, prize, winner, recognition | |
 |
Award 2 | <i class="fa-sharp fa-regular fa-medal"></i> | Medal (sharp regular) | award, prize, winner, recognition | |
 |
Award 3 | <i class="fa-sharp fa-solid fa-trophy"></i> | Trophy (solid) | award, prize, winner, recognition | |
 |
Lightbulb | <i class="fa-sharp fa-light fa-lightbulb"></i> | Lightbulb (sharp light) | Ideas, innovation | |
 |
Gear | <i class="fa-sharp fa-light fa-gear"></i> | Gear (sharp light) | Fix, tools, maintence, build | |
 |
Paper | <i class="fa-sharp fa-light fa-file-pen"></i> | File pen (sharp light) | writing, academics, scholarly, notes 1 | |
 |
Pencil | <i class="fa-sharp fa-light fa-pencil"></i> | pencil (sharp light) | writing, academics, scholarly, notes 2 | |
 |
Envelope | <i class="fa-sharp fa-light fa-envelope"></i> | envelope (sharp light) | mail, letters, email, contact us | |
 |
Classroom | <i class="fa-sharp fa-light fa-chalkboard-user"></i> | chalkboard user (sharp light) | study, teacher, classroom, learning, teaching, faculty | |
 |
Annoucement | <i class="fa-sharp fa-light fa-megaphone"></i> | megaphone (sharp light) | annoucements, events, school spirit | |
 |
Link | <i class="fa-regular fa-link"></i> | link (sharp regular) | websites, links, connections | |
 |
List | <i class="fa-sharp fa-light fa-ballot-check"></i> | ballot check (sharp light) | Use for policies, procedures, to-dos, check lists, instructions | |
 |
Check 1 | <i class="fa-sharp fa-light fa-file-check"></i> | File-check (sharp light) | checklists, requirements, to-dos | |
 |
Check 2 | <i class="fa-sharp fa-regular fa-check"></i> | Check (sharp regular) | checklists, requirements, to-dos | |
 |
Thumbs Up | <i class="fa-sharp fa-light fa-thumbs-up"></i> | thumbs up (sharp light) | Social media 1 | |
 |
Hashtag | <i class="fa-sharp fa-light fa-hashtag"></i> | hashtag (sharp light) | Social media 2 | |
 |
Pie Chart | <i class="fa-sharp fa-light fa-chart-pie"></i> | chart pie (sharp light) | pie chart, data, marketing, stats, facts and figures | |
 |
Bar Graph | <i class="fa-sharp fa-light fa-chart-simple"></i> | bar graph (sharp light) | bar graph, data, marketing, stats, facts and figures | |
 |
Music | <i class="fa-sharp fa-light fa-music"></i> | music (sharp light) | music, performance | |
 |
Art | <i class="fa-sharp fa-regular fa-palette"></i> | pallette (sharp regular) | art, design | |
 |
People 1 | <i class="fa-sharp fa-light fa-user-group"></i> | user group (sharp light) | people, community, event, classroom, family, gathering 1 | |
 |
People 2 | <i class="fa-sharp fa-light fa-screen-users"></i> | screen users (sharp light) | people, community, event, classroom, family, gathering 2 | |
 |
People 3 | <i class="fa-sharp fa-light fa-people-roof"></i> | people roof (sharp light) | people, community, event, classroom, family, gathering 3 | |
 |
Balance | <i class="fa-sharp fa-light fa-scale-balanced"></i> | scales balanced (sharp light) | diversity, equity, inclusion | |
 |
Clock | <i class="fa-sharp fa-light fa-clock"></i> | clock (sharp light) | time, clock | |
 |
Celebrate | <i class="fa-sharp fa-light fa-party-horn"></i> | party horn (sharp light) | celebration, party, acheivement, winner, school spirit | |
 |
Animal | <i class="fa-sharp fa-regular fa-paw"></i> | Paw (sharp regular) | Animal, animal care, vet, animal science | |
 |
Globe | <i class="fa-sharp fa-light fa-globe"></i> | Globe (sharp light) | World, international, website, WWW, internet, connection | |
 |
Mountains | <i class="fa-sharp fa-regular fa-mountain-sun"></i> | Mountains-sun (sharp regular) | Travel, nature, outdoors, camping | |
 |
Beach | <i class="fa-sharp fa-light fa-umbrella-beach"></i> | Ubrella-beach (sharp light) | retirement, beach, travel | |
 |
Labor | <i class="fa-sharp fa-light fa-person-carry-box"></i> | Person-carry-box (sharp light) | labor, workers comp, | |
 |
Meeting | <i class="fa-sharp fa-light fa-business-time"></i> | business-time (sharp light) | business, benefits, meeting | |
 |
Legal | <i class="fa-sharp fa-light fa-landmark"></i> | landmark (sharp light) | law, legal, | |
 |
Network | <i class="fa-sharp fa-light fa-network-wired"></i> | Network-wired (sharp light) | network, meeting, connections, flow chart, |