Foundations
Icons and media assets
Use the shipped local Font Awesome mappings and existing course imagery rather than introducing another icon family.
On this page
Icon implementation
globals.css declares Font Awesome 7 Sharp Local and Brands Local using OTF files in public/fontawesome. CSS ::before mappings select the glyph for each fa-* class. ClientOnlyIcon waits until the client mounts. CourseCard also imports Pencil from lucide-react; that existing exception is not a mandate to mix libraries elsewhere.
Usage rules
- Keep icons paired with a visible action name where possible.
- Icon-only controls still need an accessible name; a rendered glyph does not provide one automatically.
- Use real course thumbnails, with AssetImage performing the existing asset-host normalization.
- Await fonts and image decoding before captures; inspect failed glyphs and missing covers.
- Do not replace an unavailable video with a fabricated screenshot of a working player.
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1