Albuquerque Public Schools
FontAwesome
Use free or pro icons, solid.
Font Awesome Naming Changes
Font Awesome has updated to version 6. They have a new naming convention for many icons.
We are currently using version 5. Please refer to the FontAwesome 5 CheatSheet for the icons that have been renamed. The FA6 naming convention will not work with Plone at this time.
Source Code:
<span class="fas fa-arrow-circle-right"></span>
Source Code for Branded Logos:
<span class="fab fa-youtube"></span>
Source Code to Make Icons Occupy Multiple Lines:
<span class="fas fa-globe fa-pull-left fa-2x"></span>
Guidelines
- Use Free or Pro icons, with solid style only.
- Try to use the same icons for the same purposes throughout the site.
- Icon Gallery: Note, when coping icon code, FontAwesome uses <i> for brevity, but <span> is more semantically correct. Please change the <i></i> to <span></span>.
FontAwesome Documentation
- Basic Use
- Sizing Icons
- Bordered and Pulled icons
- Items in a List
- Stacking Icons
- Example: This has been used on the Employee Recognition page
Brands
fab fa-youtube
fab fa-facebook
fab fa-instagram
Pro Icons
fa-bat
fa-crow
fa-spider
Circles
fa-arrow-circle-right
fa-check-circle
fa-plus-circle
fa-times-circle
fa-exclamation-circle
fa-search
Contact, More Information
fa-envelope
fa-question-circle
fa-info-circle
fa-phone-volume
Downloads and Documents
fa-download
fa-external-link-square-alt
fa-file-alt
fa-file-contract
fa-file-download
fa-file-excel
fa-file-pdf
fa-file-word
fa-file-video
People
fa-graduation-cap
fa-book-reader
fa-user
fa-user-graduate
fa-user-friends
fa-users
Accessibility
fa-closed-captioning
fa-universal-access
Schools
fa-award
fa-bell
fa-book
fa-bus
fa-clock
fa-school
Miscellaneous
fa-bars
fa-calendar
fa-calendar-check
fa-chart-line
fa-chart-area
fa-clipboard-check
fa-flag
fa-map
fa-podcast