remove styles referencing fontawesome font

Author: PhilBastian

src/Frontend/src/components/FilterInput.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 import debounce from "lodash/debounce";
+import FAIcon from "./FAIcon.vue";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
 
 const model = defineModel<string>({ required: true });
 const emit = defineEmits<{ focus: []; blur: [] }>();
@@ -27,6 +29,7 @@ function focus() {
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
+    <FAIcon :icon="faFilter" class="icon" />
     <input ref="textField" type="search" @focus="() => emit('focus')" @blur="() => emit('blur')" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control filter-input" v-model="localInput" />
   </div>
 </template>
@@ -47,13 +50,10 @@ div.filter-input {
   height: 2.6em;
 }
 
-.filter-input:before {
-  font-family: "FontAwesome";
-  width: 1.43em;
-  content: "\f0b0";
-  color: #919e9e;
+.filter-input .icon {
   position: absolute;
-  top: calc(50% - 0.7em);
   left: 0.75em;
+  top: calc(50% - 0.5em);
+  color: var(--reduced-emphasis);
 }
 </style>

src/Frontend/src/components/monitoring/MonitoringFilter.vue

@@ -48,14 +48,4 @@ div.filter-input {
   position: relative;
   width: 280px;
 }
-
-.filter-input:before {
-  font-family: "FontAwesome";
-  width: 1.43em;
-  content: "\f0b0";
-  color: #919e9e;
-  position: absolute;
-  top: calc(50% - 0.7em);
-  left: 0.75em;
-}
 </style>