Foundations
Icons
Icons are already included. Nothing to set up. Font Awesome Free v7.0.1 is loaded by wireframe.css from cdnjs. To place an icon anywhere, drop one line of HTML in.
Usage
<i class="fa-solid fa-heart"></i>
The icon renders inline, inherits the current text color, and scales with font-size. Use fa-solid for the standard set; fa-regular is available on some icons. fa-brands is also loaded for logos (e.g. fa-twitter, fa-github).
wireframe.css sets a global default: i { color: var(--ink-3) }. Override with the utilities below, or set color directly on the icon or its parent.
Common set
fa-bars
fa-xmark
fa-magnifying-glass
fa-arrow-right
fa-arrow-left
fa-arrow-up
fa-arrow-down
fa-chevron-right
fa-chevron-left
fa-chevron-down
fa-chevron-up
fa-plus
fa-minus
fa-check
fa-circle-check
fa-circle-info
fa-circle-exclamation
fa-triangle-exclamation
fa-filter
fa-sliders
fa-gear
fa-ellipsis
fa-share-nodes
fa-image
fa-circle-play
fa-user
fa-heart
fa-star
fa-bell
fa-bookmark
fa-envelope
fa-calendar
fa-comment
fa-map-pin
fa-cloud-arrow-up
fa-house
A curated starter set covering most wireframe needs. The full library has thousands more at fontawesome.com/icons. Filter by Free + Solid.
Color utilities
default
No class needed. Icons inherit
--ink-3 from the global i rule in wireframe.css..icon-lighter
Quieter icons on light backgrounds. Uses
--icon-lighter (#a8b0ba). Good for secondary icons in dense rows or action columns.default on dark
Set
color: var(--icon-light) on a parent (e.g. a dark footer) and icons inherit it..icon-faint
Quieter icons on dark backgrounds. Uses
--icon-faint (white at 25%). Good for decorative chrome inside dark hero placeholders.