/
Icons for Sites@UMBC.edu

Icons for Sites@UMBC.edu

How to Add Icons

To use any of the 55 available icons, you need to add them through the Text Editor (not the Visual Editor). Use the following HTML structure:

<i class="fa-duotone fa-regular fa-[ICON-NAME] fa-2x"></i>

Icon Size Options

  • fa-xs - Extra small

  • fa-sm - Small

  • fa-lg - Large

  • fa-xl - Extra large

  • fa-2x - 2x size

  • fa-3x - 3x size

  • fa-4x - 4x size

  • fa-5x - 5x size

Example Usage

<div style="text-align: center; margin-bottom: 1rem"> <i class="fa-duotone fa-regular fa-graduation-cap fa-3x"></i> </div> <h3>Education Programs</h3> <p>Discover our comprehensive educational offerings.</p>

Available Icons Reference

Communication & Contact

  • envelope - Email/contact forms

    <i class="fa-duotone fa-regular fa-envelope fa-2x"></i>

  • phone - Phone numbers/contact info

    <i class="fa-duotone fa-regular fa-phone fa-2x"></i>

  • inbox - Message centers/notifications

    <i class="fa-duotone fa-regular fa-inbox fa-2x"></i>

  • comment-question - Q&A sections

    <i class="fa-duotone fa-regular fa-comment-question fa-2x"></i>

  • comments-question - Discussion forums

    <i class="fa-duotone fa-regular fa-comments-question fa-2x"></i>

Navigation & Location

  • globe - International programs/websites

    <i class="fa-duotone fa-regular fa-globe fa-2x"></i>

  • location-dot - Campus locations/addresses

    <i class="fa-duotone fa-regular fa-location-dot fa-2x"></i>

  • location-arrow - Directions/navigation

    <i class="fa-duotone fa-regular fa-location-arrow fa-2x"></i>

  • location-question - Find locations/help

    <i class="fa-duotone fa-regular fa-location-question fa-2x"></i>

  • map-location - Campus maps

    <i class="fa-duotone fa-regular fa-map-location fa-2x"></i>

  • arrow-right - Next/continue buttons

    <i class="fa-duotone fa-regular fa-arrow-right fa-2x"></i>

  • arrow-down - Download/more info

    <i class="fa-duotone fa-regular fa-arrow-down fa-2x"></i>

  • arrow-up-right-from-square - External links

    <i class="fa-duotone fa-regular fa-arrow-up-right-from-square fa-2x"></i>

Education & Academic

  • school - School programs/departments

    <i class="fa-duotone fa-regular fa-school fa-2x"></i>

  • graduation-cap - Degrees/graduation info

    <i class="fa-duotone fa-regular fa-graduation-cap fa-2x"></i>

  • book - Single courses/textbooks

    <i class="fa-duotone fa-regular fa-book fa-2x"></i>

  • books - Libraries/multiple courses

    <i class="fa-duotone fa-regular fa-books fa-2x"></i>

  • book-open-cover - Reading programs

    <i class="fa-duotone fa-regular fa-book-open-cover fa-2x"></i>

  • book-open-lines - Study materials

    <i class="fa-duotone fa-regular fa-book-open-lines fa-2x"></i>

  • book-spine - Course catalogs

    <i class="fa-duotone fa-regular fa-book-spine fa-2x"></i>

  • diploma - Certifications/credentials

    <i class="fa-duotone fa-regular fa-diploma fa-2x"></i>

  • scroll - Historical documents/transcripts

    <i class="fa-duotone fa-regular fa-scroll fa-2x"></i>

  • backpack - Student life/supplies

    <i class="fa-duotone fa-regular fa-backpack fa-2x"></i>

Teaching & Learning

  • chalkboard - Traditional teaching

    <i class="fa-duotone fa-regular fa-chalkboard fa-2x"></i>

  • chalkboard-user - Instructor profiles

    <i class="fa-duotone fa-regular fa-chalkboard-user fa-2x"></i>

  • person-chalkboard - Faculty/teaching staff

    <i class="fa-duotone fa-regular fa-person-chalkboard fa-2x"></i>

  • brain - Psychology/cognitive programs

    <i class="fa-duotone fa-regular fa-brain fa-2x"></i>

  • head-side-brain - Mental health/counseling

    <i class="fa-duotone fa-regular fa-head-side-brain fa-2x"></i>

  • head-side-gear - Problem solving/engineering

    <i class="fa-duotone fa-regular fa-head-side-gear fa-2x"></i>

Technology & Digital

  • laptop - Online learning/computer labs

    <i class="fa-duotone fa-regular fa-laptop fa-2x"></i>

  • desktop - Computer science/IT programs

    <i class="fa-duotone fa-regular fa-desktop fa-2x"></i>

  • computer - General technology

    <i class="fa-duotone fa-regular fa-computer fa-2x"></i>

  • display - Presentations/digital displays

    <i class="fa-duotone fa-regular fa-display fa-2x"></i>

  • laptop-file - Digital documents/assignments

    <i class="fa-duotone fa-regular fa-laptop-file fa-2x"></i>

  • laptop-mobile - Mobile learning/responsive design

    <i class="fa-duotone fa-regular fa-laptop-mobile fa-2x"></i>

  • browsers - Web development/internet resources

    <i class="fa-duotone fa-regular fa-browsers fa-2x"></i>

  • code-simple - Programming/coding courses

    <i class="fa-duotone fa-regular fa-code-simple fa-2x"></i>

  • database - Data management/databases

    <i class="fa-duotone fa-regular fa-database fa-2x"></i>

  • robot - AI/robotics programs

    <i class="fa-duotone fa-regular fa-robot fa-2x"></i>

  • screen-users - Virtual classrooms/online collaboration

    <i class="fa-duotone fa-regular fa-screen-users fa-2x"></i>

Campus & Facilities

  • building-columns - Main campus/administration

    <i class="fa-duotone fa-regular fa-building-columns fa-2x"></i>

  • bus-school - Transportation/campus shuttle

    <i class="fa-duotone fa-regular fa-bus-school fa-2x"></i>

  • school-circle-check - Accreditation/verified programs

    <i class="fa-duotone fa-regular fa-school-circle-check fa-2x"></i>

  • school-flag - School pride/achievements

    <i class="fa-duotone fa-regular fa-school-flag fa-2x"></i>

Tools & Resources

  • pen - Writing/composition courses

    <i class="fa-duotone fa-regular fa-pen fa-2x"></i>

  • pen-to-square - Editing/revision

    <i class="fa-duotone fa-regular fa-pen-to-square fa-2x"></i>

  • pencil - Basic writing/note-taking

    <i class="fa-duotone fa-regular fa-pencil fa-2x"></i>

  • user-pen - Student registration/profiles

    <i class="fa-duotone fa-regular fa-user-pen fa-2x"></i>

  • calendar-pen - Scheduling/important dates

    <i class="fa-duotone fa-regular fa-calendar-pen fa-2x"></i>

Information & Help

  • circle-info - General information/help

    <i class="fa-duotone fa-regular fa-circle-info fa-2x"></i>

  • cloud-question - FAQ/cloud services help

    <i class="fa-duotone fa-regular fa-cloud-question fa-2x"></i>

Special Programs & Services

  • universal-access - Accessibility services

    <i class="fa-duotone fa-regular fa-universal-access fa-2x"></i>

  • hand-heart - Community service/volunteer programs

    <i class="fa-duotone fa-regular fa-hand-heart fa-2x"></i>

  • dog - Pet therapy/animal programs

    <i class="fa-duotone fa-regular fa-dog fa-2x"></i>

  • paw - Veterinary programs/pet-friendly campus

    <i class="fa-duotone fa-regular fa-paw fa-2x"></i>

 

Sample Icon + Card Layout Code

<div class="sights-row sights-responsive"> <div class="sights-col-4 sights-mb-3"> <div class="sights-callout-box sights-p-4 sights-card-hover" style="text-align: center"> <div style="margin-bottom: 1rem"> <i class="fa-duotone fa-regular fa-graduation-cap fa-2x"></i> </div> <h3>Degree Programs</h3> <p>Explore our comprehensive degree offerings and find your path to success.</p> <a href="#">Learn More</a> </div> </div> </div>

Tips for Best Results

  1. Always use the Text Editor - Visual editor may strip the icon code

  2. Test your icons - Preview your page to ensure icons display correctly

  3. Choose appropriate sizes - fa-2x works well for most card layouts

  4. Maintain consistency - Use the same size icons within similar sections

  5. Consider context - Match icons to your content for better user experience

Troubleshooting

If icons don't appear:

  • Verify you're using the Text Editor, not Visual Editor

  • Ensure the icon name matches exactly from the list above

  • Clear any caching

Request Help | Correct or Suggest an Article