Awesome Navbar Demo

Return to the code on GitHub.

Note: for Font Awesome web font and Web Awesome <wa-icon> approaches these must be updated to use the Build Awesome brand icon (not yet in FA as of 7.2.0). Until available, this icon is injected via JS.

Note: <span class="awesome-spacer"> is optional but does reduce CLS.

fontawesome.com

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

Always light theme

Always dark theme

docs.fontawesome.com

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

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 (except Build Awesome). 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