diff --git a/src/components/Header.vue b/src/components/Header.vue index e7ad3eafed21819242a35a53c8d099a736f9f404..6d202de44dc5063afe3a2f4f7225b8117a3ab478 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -9,9 +9,8 @@ <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i> <v-menu rounded="0" v-model="menu" offset-x max-width="200px"> <template v-slot:activator="{ on, attrs }"> - <v-btn v-bind="attrs" v-on="on" depressed min-width="14px" max-width="14px" class="help-button" x-small - color="primary"> - <v-icon middle x-small>$vuetify.icons.value.info</v-icon> + <v-btn x-small icon v-on="on" v-bind="attrs" class="info-button"> + <v-icon color="primary" size="14px">$vuetify.icons.value.info</v-icon> </v-btn> </template> <v-card rounded="0" class="info-card"> @@ -136,11 +135,11 @@ article h2.secondary_header { padding-bottom: 4px; } -.help-button { +.info-button { margin-left: 6px; - margin-right: 2px; - margin-bottom: 4px; - color: var(--v-primary-base); + margin-right: -2px; + height: 10px; + width: 10px; } .info-card { diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js index b492c4eefcdd3a21f5b8d94e255e659698d9a29a..405b5cc7e8e672ea6f8ce55d86d01c134ec804c3 100644 --- a/src/plugins/vuetify.js +++ b/src/plugins/vuetify.js @@ -2,10 +2,10 @@ import Vue from 'vue'; import 'material-design-icons-iconfont/dist/material-design-icons.css'; import Vuetify from 'vuetify/lib/framework'; import { library } from '@fortawesome/fontawesome-svg-core' -import { faShareAltSquare, faInfo} from '@fortawesome/free-solid-svg-icons' +import { faShareAltSquare, faInfoCircle} from '@fortawesome/free-solid-svg-icons' import { faFacebookSquare, faTwitterSquare} from '@fortawesome/free-brands-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' -library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faInfo) +library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faInfoCircle) Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.use(Vuetify); @@ -32,7 +32,7 @@ const FONTAWESOME_ICONS = { info: { component: FontAwesomeIcon, props: { - icon: ["fa", "info"] + icon: ["fa", "info-circle"] } } }