Awesome Navbar Demo

Return to the code on GitHub.

Note: <span class="awesome-spacer"> is optional but does reduce cumulative layout shift (CLS).

fontawesome.com

Using Font Awesome <i> (Web Font): no JavaScript required for icons.

Always light theme

Always dark theme

docs.fontawesome.com

No page-level max width. Using <i> (Web Font): no JavaScript required for icons.

Always light theme

Always dark theme

build.awesome.me (soon) née 11ty.dev

Embedded icons: no JavaScript required.

Always light theme

Always dark theme

webawesome.com

Using <wa-icon> (except for Build Awesome balloon): all require JavaScript. ~83em max width.

Always light theme

Always dark theme

podcastawesome.com

Using Font Awesome <i> (Web Font): no JavaScript required for icons. 96em max width.

Always light theme

Always dark theme

blog.fontawesome.com

(Using Build Awesome) Embedded icons: JavaScript not required. 45em max width.

Always light theme

Always dark theme

look.awesome.me

Using Font Awesome <i> (Web Font): no JavaScript required for icons.

Always light theme

Always dark theme