feat(navigation): hard-switch to Zibll navigation and Font Awesome 5

assets/admin/src/components/form/FaIcon.vue

@@ -11,16 +11,16 @@
  * FaIcon — Font Awesome 5 icon wrapper component.
  *
  * Usage:
- *   <FaIcon icon="fas fa-cog" />
- *   <FaIcon icon="fa-cog" />          → defaults to "fas" prefix
- *   <FaIcon icon="fab fa-github" />
- *   <FaIcon :size="18" icon="far fa-heart" />
- *   <FaIcon spin icon="fas fa-spinner" />
+ *   <FaIcon icon="fa fas fa-cog" />
+ *   <FaIcon icon="fa-cog" />          → defaults to solid FA5
+ *   <FaIcon icon="fa fab fa-github" />
+ *   <FaIcon :size="18" icon="fa fas fa-heart" />
+ *   <FaIcon spin icon="fa fas fa-spinner" />
  */
 import { computed } from 'vue'
 
 const props = defineProps({
-  /** FA5 class string, e.g. "fas fa-cog", "fab fa-github", or just "fa-cog" */
+  /** FA5 class string, e.g. "fa fas fa-cog", "fa fab fa-github", or just "fa-cog" */
   icon: { type: String, required: true },
   /** Pixel size — maps to font-size */
   size: { type: [Number, String], default: null },
@@ -41,10 +41,10 @@ const props = defineProps({
 const iconClass = computed(() => {
   const parts = []
 
-  // Auto-prefix: if only "fa-xxx" is given, default to "fas"
+  // Auto-prefix: if only "fa-circle" is given, use the solid FA5 style.
   const raw = props.icon.trim()
   if (raw.startsWith('fa-')) {
-    parts.push('fas', raw)
+    parts.push('fa', 'fas', raw)
   } else {
     parts.push(...raw.split(/\s+/))
   }