How It Works: Icons with Font Awesome (and Choosing an Icon Strategy)


What it is

Font Awesome is a large icon set (free + pro) delivered as SVGs, webfonts, and framework packages.

Install & use (Svelte example)

npm i @fortawesome/fontawesome-free

<!-- In a Svelte component -->
<i class="fa-solid fa-user mr-2"></i> Profile

<!-- Or inline SVG to avoid webfont flashes -->
<!-- <svg class="w-4 h-4" viewBox="0 0 448 512" aria-hidden="true">...</svg> -->

How it works

- **Webfont mode** loads a font; icons referenced via classes (`fa-solid fa-user`).
- **SVG mode** (inline or JS‑injected) gives better control and accessibility.
- **Tree‑shaking** when importing specific icons/packs (ESM) to keep bundles small.

Advantages

- **Huge catalog** including brands.
- **Multiple styles** (solid/regular) for hierarchy.
- **Works everywhere** (SVG or webfont).

Disadvantages

- **FOUT/bundle size** with webfonts; prefer per‑icon SVG.
- **Pro licensing** considerations.
- **Visual inconsistency** across categories vs single‑style sets.

Competitors / Alternatives

- **Heroicons / Lucide / Tabler / Phosphor** — clean, consistent SVG sets; great for apps, fewer brand marks.
- **Material Icons** — comprehensive, but heavier if not tree‑shaken.
- **Custom set** — perfect match; more maintenance.

Recommendation

- App UIs: prefer a consistent SVG set with tree‑shaking (e.g., Lucide/Heroicons).
- Marketing/brand needs: add Font Awesome Brands or a curated brand subset.

Performance tips

- Inline critical icons; load the rest via ESM.
- Avoid global icon webfonts; import only what you use.
- For decorative icons add `aria-hidden="true"` and nearby text.


Taylor Swift

“You belong with me.”

Comments

Post a Comment

Popular posts from this blog

Learning to Automate My Side Projects with SWE-agent + GitLab

Image
I wanted to share something I built. I managed to connect SWE-agent with my self-hosted GitLab so that Issues can drive automation—and I think it’s kind of cool. (Currently, it isn’t directly supported in SWE-Agent, but there is an issue ( https://github.com/SWE-agent/SWE-agent/issues/760 ) on GitHub to add support. Why wait? ^_^) I’ve been tinkering with SWE-agent in the homelab while between roles. SWE-agent doesn’t natively support GitLab, but that wasn’t going to stop me—I wired it into my self-hosted GitLab instance so Issues drive the automation end-to-end. The Flow I Built 1. Start with an Issue. When I create an Issue, I describe the task in plain language. For example: “create `/taylor-swift` route that responds with JSON key lucky=13.” 2. Label the intent. Add the label `run:swe` and tag the model (in my case: `model:qwen3-coder-30b-a3b-instruct` from LM Studio). There is also a label swe:in-progress so that the pipeline does not pick up in-progress issues. If the pipeline ne...
Read more

Ship-Ready Web Essentials: Search, Sitemap, Metadata & Icons (SvelteKit)

This guide is a pragmatic, production-minded checklist and how-to for hardening a SvelteKit landing site so it’s discoverable by search engines, understandable by AI crawlers, and delightful on modern devices. It includes file locations, example contents, and verification steps. Everything here works even if you only have a single landing page today. Branding note: this document uses a fictional brand (“Example Store”) and domain (example.com). Replace these with your own values when you implement. Quick To-Do Checklist • Serve a real XML sitemap at /sitemap.xml and reference it in robots.txt. • Add a lightweight, server-rendered /search?q=… endpoint (backs JSON-LD SearchAction). • Place ai.txt (allow/deny AI crawlers) and .well-known/security.txt (vuln-reporting). • Wire canonical Open Graph/Twitter tags and og.png for social previews. • Add platform icons (apple-touch-icon.png, safari-pinned-tab.svg) and site.webmanifest. • Harden app.html with meta theme-color (light/dark), color-sc...
Read more

Kubernetes Secrets Management — SOPS + age (GitOps‑friendly)

Image
  Owner: Platform Engineering Audience: Devs & Ops Status: Adopted This document captures the exact process we use to manage Kubernetes secrets with Mozilla SOPS and the age encryption tool. It includes why we chose this approach, how to work with secrets day‑to‑day, and trade‑offs versus other methods. Executive Summary We store Kubernetes Secret manifests in Git encrypted at rest using SOPS with an age public key.  SOPS encrypts your secret values with AES‑256‑GCM , which is industry gold standard. In SOPS you can not swap AES‑256‑GCM out. The age private key lives only in protected CI variables. CI decrypts the manifests at deploy time and applies them with kubectl. No in‑cluster controllers, CRDs, or webhooks are required. Why this approach Top benefits: • Zero in‑cluster installs (no CRDs/controllers to run or break). • GitOps‑native: encrypted YAML sits in the repo; diffs remain readable (metadata & keys stay visible). • Cloud‑agnostic: age works anywhere; no ...
Read more