Pure CSS font awesome icon

public/config.yml.dist

@@ -69,3 +69,8 @@ services:
         tag: "app"
         url: "https://www.reddit.com/r/selfhosted/"
         target: "_blank" # optionnal html a tag target attribute
+      - name: "Another one"
+        logo: "assets/tools/sample2.png"
+        subtitle: "Another application"
+        tag: "app"
+        url: "#"

src/App.vue

@@ -5,7 +5,7 @@
     :class="[
       `theme-${config.theme}`,
       isDark ? 'is-dark' : 'is-light',
-      !config.footer ? 'no-footer' : ''
+      !config.footer ? 'no-footer' : '',
     ]"
   >
     <DynamicTheme :themes="config.colors" />
@@ -132,7 +132,7 @@ export default {
     SearchInput,
     SettingToggle,
     DarkMode,
-    DynamicTheme
+    DynamicTheme,
   },
   data: function () {
     return {
@@ -142,7 +142,7 @@ export default {
       filter: "",
       vlayout: true,
       isDark: null,
-      showMenu: false
+      showMenu: false,
     };
   },
   created: async function () {
@@ -205,10 +205,10 @@ export default {
         {
           name: filter,
           icon: "fas fa-search",
-          items: searchResultItems
+          items: searchResultItems,
-        }
+        },
       ];
-    }
+    },
-  }
+  },
 };
 </script>

src/assets/defaults.yml

@@ -35,5 +35,6 @@ colors:
     card-shadow: rgba(0, 0, 0, 0.4)
     link-hover: "#ffdd57"
 
+message: ~
 links: []
 services: []

src/components/SettingToggle.vue

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

src/main.js

@@ -3,7 +3,6 @@ import App from "./App.vue";
 import "./registerServiceWorker";
 
 import "@fortawesome/fontawesome-free/css/all.css";
-import "@fortawesome/fontawesome-free/js/all.js";
 
 import "./assets/app.scss";