:lipstick: Add fa-fw to icons by default to fix variable width icons

Fixes #93

4 files changed, 4 insertions, 4 deletions

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 0bcde0f..a5aae41 100644
--- a/src/components/DarkMode.vue
+++ b/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>
 
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d3ceaf8..c688a3a 100644
--- a/src/components/Navbar.vue
+++ b/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>
diff --git a/src/components/Service.vue b/src/components/Service.vue
index a2448ca..88e6e69 100644
--- a/src/components/Service.vue
+++ b/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">
diff --git a/src/components/SettingToggle.vue b/src/components/SettingToggle.vue
index 864a497..ffc91a1 100644
--- a/src/components/SettingToggle.vue
+++ b/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>