Font Awesome 7 icons not loading on all pages #114

New Issue

2026-04-03T03:59:45Z

jmiller-moko commented

2026-04-03 03:59:45 +00:00

(Migrated from github.com)

Description

Font Awesome 7 Free icons are not rendering on all pages despite the CSS files being registered in joomla.asset.json and loaded in index.php.

Possible Causes

Webfonts not deployed — The vendor/ gitignore rule was excluding media/vendor/fa7free/webfonts/ from deployment. Fixed by removing the vendor/ rule from .gitignore (commits on both main and dev/03.09.01).
Asset loading order — FA7 CSS files are loaded via $wa->useStyle() inside a try/catch with a fallback to registerAndUseStyle(). If the WebAsset registry doesn't have the assets pre-registered, the first attempt throws and the fallback uses dynamic paths. Check that joomla.asset.json is properly deployed.
Development mode mismatch — When dev mode is ON, unminified FA7 CSS is loaded (vendor.fa7free.all); when OFF, minified (vendor.fa7free.all.min). If the .min.css files don't exist on the server, icons will fail silently.
CSS font-face paths — FA7 CSS references webfont files via relative ../webfonts/ paths. If the CSS is loaded from a different directory than expected, the font files won't be found.

Investigation Steps

Verify media/templates/site/mokocassiopeia/vendor/fa7free/webfonts/ exists on the server with .woff2 files
Check browser DevTools Network tab for 404s on .woff2 files
Verify the correct FA7 CSS variant is loading (check dev mode setting)
Confirm joomla.asset.json is deployed alongside the CSS files

.gitignore vendor/ rule fix (deployed)
Development mode minification toggle (deployed)

## Description Font Awesome 7 Free icons are not rendering on all pages despite the CSS files being registered in `joomla.asset.json` and loaded in `index.php`. ## Possible Causes 1. **Webfonts not deployed** — The `vendor/` gitignore rule was excluding `media/vendor/fa7free/webfonts/` from deployment. Fixed by removing the `vendor/` rule from `.gitignore` (commits on both `main` and `dev/03.09.01`). 2. **Asset loading order** — FA7 CSS files are loaded via `$wa->useStyle()` inside a try/catch with a fallback to `registerAndUseStyle()`. If the WebAsset registry doesn't have the assets pre-registered, the first attempt throws and the fallback uses dynamic paths. Check that `joomla.asset.json` is properly deployed. 3. **Development mode mismatch** — When dev mode is ON, unminified FA7 CSS is loaded (`vendor.fa7free.all`); when OFF, minified (`vendor.fa7free.all.min`). If the `.min.css` files don't exist on the server, icons will fail silently. 4. **CSS font-face paths** — FA7 CSS references webfont files via relative `../webfonts/` paths. If the CSS is loaded from a different directory than expected, the font files won't be found. ## Investigation Steps - [ ] Verify `media/templates/site/mokocassiopeia/vendor/fa7free/webfonts/` exists on the server with `.woff2` files - [ ] Check browser DevTools Network tab for 404s on `.woff2` files - [ ] Verify the correct FA7 CSS variant is loading (check dev mode setting) - [ ] Confirm `joomla.asset.json` is deployed alongside the CSS files ## Related - `.gitignore` vendor/ rule fix (deployed) - Development mode minification toggle (deployed)

jmiller-moko commented

2026-04-04 16:57:16 +00:00

(Migrated from github.com)

Resolved across multiple commits.

Root cause was the vendor/ gitignore rule excluding FA7 webfonts from deployment. This was fixed by removing that rule. Additionally:

FA7 asset loading uses try/catch with dynamic fallback registration
Dev mode (now auto-enabled when Joomla debug is on) loads unminified all.css
Webfont files (fa-brands-400.woff2, fa-regular-400.woff2, fa-solid-900.woff2, fa-v4compatibility.woff2) are all present in src/media/vendor/fa7free/webfonts/
The deploy-dev workflow skips .min.css files but deploys all other vendor assets including webfonts

**Resolved across multiple commits.** Root cause was the `vendor/` gitignore rule excluding FA7 webfonts from deployment. This was fixed by removing that rule. Additionally: - FA7 asset loading uses try/catch with dynamic fallback registration - Dev mode (now auto-enabled when Joomla debug is on) loads unminified `all.css` - Webfont files (`fa-brands-400.woff2`, `fa-regular-400.woff2`, `fa-solid-900.woff2`, `fa-v4compatibility.woff2`) are all present in `src/media/vendor/fa7free/webfonts/` - The deploy-dev workflow skips `.min.css` files but deploys all other vendor assets including webfonts

jmiller-moko commented

2026-04-04 19:49:14 +00:00

(Migrated from github.com)

Update: Root cause identified

The Font Awesome 7 CSS and webfont files are present in the repository at src/media/vendor/fa7free/, but the MokoStandards deploy-sftp workflow is not uploading the vendor/ directory to the dev server. This is a global ignore rule in the deploy script — not a template issue.

Status: Waiting on MokoStandards fix

The deploy-dev.yml (or the underlying deploy-sftp.php) needs to be updated to allow media/vendor/ through. Once the vendor directory is deployed, FA7 will load correctly — the asset paths in joomla.asset.json and the fallback detection in index.php are already correct.

What was done in this repo

Added multi-path fallback detection for FA7 CSS (media/ path + template-relative path + __DIR__ path)
Added IcoMoon → Font Awesome 7 CSS compatibility layer (80+ icon mappings) so Joomla core icon-* classes render via FA7 even without IcoMoon loaded
Replaced all IcoMoon icon-* references in template PHP files with fa-solid fa-* equivalents

## Update: Root cause identified The Font Awesome 7 CSS and webfont files are present in the repository at `src/media/vendor/fa7free/`, but the **MokoStandards deploy-sftp workflow** is not uploading the `vendor/` directory to the dev server. This is a global ignore rule in the deploy script — not a template issue. ### Status: Waiting on MokoStandards fix The `deploy-dev.yml` (or the underlying `deploy-sftp.php`) needs to be updated to allow `media/vendor/` through. Once the vendor directory is deployed, FA7 will load correctly — the asset paths in `joomla.asset.json` and the fallback detection in `index.php` are already correct. ### What was done in this repo - Added multi-path fallback detection for FA7 CSS (`media/` path + template-relative path + `__DIR__` path) - Added IcoMoon → Font Awesome 7 CSS compatibility layer (80+ icon mappings) so Joomla core `icon-*` classes render via FA7 even without IcoMoon loaded - Replaced all IcoMoon `icon-*` references in template PHP files with `fa-solid fa-*` equivalents

jmiller-moko commented

2026-04-08 04:12:58 +00:00

(Migrated from github.com)

Fixed — vendor/ folder was missing from templateDetails.xml manifest. Added as a folder entry so Joomla includes it during installation.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoCassiopeia#114