💄 Add fa-fw to icons by default to fix variable width icons

Fixes #93

src/App.vue

@@ -14,7 +14,7 @@
         <div v-cloak class="container">
           <div class="logo">
             <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
-            <i v-if="config.icon" :class="config.icon"></i>
+            <i v-if="config.icon" :class="['fa-fw', config.icon]"></i>
           </div>
           <div class="dashboard-title">
             <span class="headline">{{ config.subtitle }}</span>
@@ -61,7 +61,7 @@
           <div v-if="!vlayout || filter" class="columns is-multiline">
             <template v-for="group in services">
               <h2 v-if="group.name" class="column is-full group-title">
-                <i v-if="group.icon" :class="group.icon"></i>
+                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 {{ group.name }}
               </h2>
               <Service
@@ -84,7 +84,7 @@
               :key="group.name"
             >
               <h2 v-if="group.name" class="group-title">
-                <i v-if="group.icon" :class="group.icon"></i>
+                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 {{ group.name }}
               </h2>
               <Service

src/components/DarkMode.vue

@@ -4,7 +4,7 @@
     aria-label="Toggle dark mode"
     class="navbar-item is-inline-block-mobile"
   >
-    <i class="fas fa-adjust"></i>
+    <i class="fas fa-fw fa-adjust"></i>
   </a>
 </template>
 

src/components/Navbar.vue

@@ -29,7 +29,7 @@
               <i
                 v-if="link.icon"
                 style="margin-right: 6px;"
-                :class="link.icon"
+                :class="['fa-fw', link.icon]"
               ></i>
               {{ link.name }}
             </a>

src/components/Service.vue

@@ -11,7 +11,7 @@
             </div>
             <div v-if="item.icon" class="media-left">
               <figure class="image is-48x48">
-                <i style="font-size: 35px;" :class="item.icon"></i>
+                <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i>
               </figure>
             </div>
             <div class="media-content">

src/components/SettingToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
-    <span><i :class="['fas', value ? icon : iconAlt]"></i></span>
+    <span><i :class="['fas', 'fa-fw', value ? icon : iconAlt]"></i></span>
     <slot></slot>
   </a>
 </template>