add vue-fontawesone

src/icon.js

@@ -0,0 +1,12 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+//import { fa } from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList } from '@fortawesome/free-solid-svg-icons'
+
+// Add Free Font Awesome Icons here
+// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
+library.add(faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList)
+
+export {
+    FontAwesomeIcon
+}

src/layouts/Layout.vue

@@ -14,8 +14,8 @@
         </router-link>
 
         <ul class="nav nav-pills" >
-            <li class="nav-item"><router-link to="/dashboard" class="nav-link">📊 Dashboard</router-link></li>
-            <li class="nav-item"><router-link to="/settings" class="nav-link">🔧 Settings</router-link></li>
+            <li class="nav-item"><router-link to="/dashboard" class="nav-link"><font-awesome-icon icon="tachometer-alt" /> Dashboard</router-link></li>
+            <li class="nav-item"><router-link to="/settings" class="nav-link"><font-awesome-icon icon="cog" /> Settings</router-link></li>
         </ul>
     </header>
 
@@ -44,10 +44,27 @@
     <!-- Mobile Only -->
     <div style="width: 100%;height: 60px;" v-if="$root.isMobile"></div>
     <nav class="bottom-nav" v-if="$root.isMobile">
-        <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList"><div>📊</div>Dashboard</router-link>
-        <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile"><div>📃</div>List</a>
-        <router-link to="/add" class="nav-link" @click="$root.cancelActiveList"><div>➕</div>Add</router-link>
-        <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList"><div>🔧</div>Settings</router-link>
+
+        <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
+            <div><font-awesome-icon icon="tachometer-alt" /></div>
+            Dashboard
+        </router-link>
+
+        <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
+            <div><font-awesome-icon icon="list" /></div>
+            List
+        </a>
+
+        <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
+            <div><font-awesome-icon icon="plus" /></div>
+            Add
+        </router-link>
+
+        <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
+            <div><font-awesome-icon icon="cog" /></div>
+            Settings
+        </router-link>
+
     </nav>
 </template>
 
@@ -99,7 +116,7 @@ export default {
     box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05);
     text-align: center;
     white-space: nowrap;
-    padding: 0 35px;
+    padding: 0 10px;
 
     a {
         text-align: center;
@@ -144,6 +161,7 @@ main {
 footer {
     color: #AAA;
     font-size: 13px;
+    margin-top: 10px;
     margin-bottom: 30px;
     margin-left: 10px;
     text-align: center;

src/main.js

@@ -15,6 +15,7 @@ import Toast from "vue-toastification";
 import "vue-toastification/dist/index.css";
 import "bootstrap"
 import Setup from "./pages/Setup.vue";
+import {FontAwesomeIcon} from "./icon.js"
 
 const routes = [
     {
@@ -88,5 +89,7 @@ const options = {
 
 app.use(Toast, options);
 
+app.component('font-awesome-icon', FontAwesomeIcon)
+
 app.mount('#app')
 

src/pages/Dashboard.vue

@@ -4,7 +4,7 @@
         <div class="row">
             <div class="col-12 col-md-5 col-xl-4">
                 <div v-if="! $root.isMobile">
-                    <router-link to="/add" class="btn btn-primary">Add New Monitor</router-link>
+                    <router-link to="/add" class="btn btn-primary"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
                 </div>
 
                 <div class="shadow-box list mb-4" v-if="showList">

src/pages/Details.vue

@@ -11,10 +11,10 @@
     </p>
 
     <div class="functions">
-        <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
-        <button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active">Resume</button>
-        <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
-        <button class="btn btn-danger" @click="deleteDialog">Delete</button>
+        <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active"><font-awesome-icon icon="pause" /> Pause</button>
+        <button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active"><font-awesome-icon icon="pause" /> Resume</button>
+        <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary"><font-awesome-icon icon="edit" /> Edit</router-link>
+        <button class="btn btn-danger" @click="deleteDialog"><font-awesome-icon icon="trash" /> Delete</button>
     </div>
 
     <div class="shadow-box">