Replace Font Awesome kit with inline SVG icons and remove blocking script

[tobybeevers]

Motivation

• Remove the external Font Awesome kit dependency to reduce third-party runtime and avoid a render-blocking external script on first paint.
• Keep the icon payload minimal by only providing the specific symbols the site actually uses (social/brand icons + two hero icons).

Description

• Audited the site and found Font Awesome icons only used in my_links.html, my_blog.html, and personal_development.html, plus the kit script included in top-level pages and blog templates; the kit script tag was removed from those pages (index.html, my_links.html, my_blog.html, personal_development.html, my_early_years.html, career_change.html, and Blog-Posts/*).
• Replaced the used <i class="fa-..."> elements with inline <svg> markup for each required symbol in my_links.html, my_blog.html, and personal_development.html so only the needed icons are loaded.
• Added local CSS utilities for sizing/coloring icons in css/styles.css (.inline-icon and .inline-icon--xl).
• Kept the site structure and accessibility attributes (aria-hidden, focusable) while switching to inline SVGs so icons remain decorative and non-blocking.

Testing

• Searched the repository with rg -n "kit.fontawesome|fa-|fontawesome" to verify kit/script and <i class="fa- references were removed, and the search returned no remaining kit references (success).
• Served the site locally with python -m http.server 4173 and loaded http://127.0.0.1:4173/my_links.html to visually validate icon rendering (success).
• Captured a verification screenshot using a Playwright script to confirm inline SVGs render as expected (screenshot produced successfully).

---

Codex Task