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

Fixes #93

diff --git a/src/App.vue b/src/App.vue
index 17c32143b44cc93d4740f2cd6fdb547e00f2e0f4..fec020c36c265859a13af423cef9369a434e7c45 100644 (file)
--- a/src/App.vue
+++ b/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

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 0bcde0f9fae9974e2082f8c3b328633765607de0..a5aae41cfa15911334d5ce94d0272babc25bf90a 100644 (file)
--- 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 d3ceaf89aa068152fbfd489321ca8620cc2df223..c688a3ab7528c6b79d67cfb9b3a652d99d1eaa83 100644 (file)
--- 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 a2448ca28abe8a4a0d652b4f38db493324547c9a..88e6e69cec28f8833d4ccdb50214d6cbd264b6e2 100644 (file)
--- 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 864a497243df4e7685f427ef469ffb987ce495ab..ffc91a1c041d3fc34bef14b53b5b669661cfa95a 100644 (file)
--- 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>