First of all, I am a beginner and I do not know how to ask the question correctly, but I hope you can help me.
I am building a website based on vuejs, css and vuetify. I use the "v-icon" and define the "linear-gradient" myself with CSS. In Windows and Andoid it works with all browsers. But with iOS/Safari the icons are not displayed.
I got it right with the "v-btn"
What do I have to do so that the icons are displayed correctly in iOS/Safari?
Here is the website: holidaytimes.de
My code looks like this:
In Template:
<v-icon class="vicon-color-linear-gradient">mdi-calendar-month</v-icon>
In CSS:
.vicon-color-linear-gradient {
background-image: linear-gradient(to bottom,rgba(249, 164, 78, 100), rgba(219, 31, 38, 100)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important; /*same with rgba(255, 255, 255, 0)*/
}
In main.js:
import vuetify from '@/plugins/vuetify';
import '@mdi/font/css/materialdesignicons.css';
new Vue({
vuetify,
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
Here you can see in two screenshots how it looks currently
If I have forgotten any information, just let me know and I will add it.
