Font Awesome

An icon set you can drop into any page.

Font Awesome is taught here in 11 lessons, running from Installing Font Awesome through to Build-time optimisation, subsets and bundle budgets. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Installing Font AwesomeThree ways to get the icons into a project — CDN, npm packages and hosted kits — and what each one costs you.
2. Using, sizing and animating iconsThe class syntax, the three free styles, the sizing scale, fixed width and stacking, and the rotation and animation utilities.
3. Accessibility and performance trade-offsDecorative versus meaningful icons, the labelling patterns that actually work, and what each delivery method costs in bytes and render time.
4. Pseudo-element icons and CSS styling hooksRender icons through ::before content codes, wire up the font-family rules once, and use v7 CSS custom properties to colour and size icons without touching the markup.
5. Kits, CDN and self-hostingCreate and configure a kit, understand what the kit script does at runtime, handle CSP, and self-host either the web fonts or the SVG sprite.
6. SVG with JavaScript: how it works and when to use itUnderstand the automatic replacement pass, its MutationObserver cost, how to disable or scope it, and when web fonts are still the better choice.
7. Font Awesome in React, Vue and AngularUse the official component packages with the icon library pattern, keep tree-shaking intact, and work around the v7 removal of the dynamic icon component.
8. Custom icons, duotone and the styling toolkitAdd your own icons, control duotone's two layers from CSS, use the sharp styles, and understand what the Icon Wizard and Pro+ packs change.
9. Transforms, layering, masking and listsUse the power transforms for rotation, flipping and scaling, compose icons with layers and masks, and build icon lists that work in both directions.
10. Upgrading from Font Awesome 5 and 6 to 7The breaking changes that matter, the class and family renames to search for, and a migration order that keeps the icons visible throughout.
11. Build-time optimisation, subsets and bundle budgetsPrune unused icons, generate a font subset or a sprite, measure transferred bytes, and avoid the layout shift that icon fonts are known for.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery ECharts Chart.js SVG

FAQ