J'utilise vue.js et vuetify . Je veux ajouter une icône mais ne fonctionne pas. (non rendu)
Comment puis-je réparer cela?
veuillez vous référer au code suivant
main.js
<i class="material-icons"> keyboard_arrow_down </i>
index.html
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
calendrier.vue
import Vue from 'vue' import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; Vue.use(Vuetify);
Je veux que ça ressemble à une icône, pas à du code
10 Réponses :
Si vous utilisez Vuetify, vous devez simplement utiliser le composant <v-icon> qui prend en charge les icônes Material et Font Awesome: documentation
Exemple:
<v-icon>arrow_downward</v-icon>
En utilisant Vuetify, vous n'aurez plus besoin d'utiliser la syntaxe class="icon_name" .
EDIT: références d'icônes - Material Design & Font Awesome
EDIT 2: Ça fait un an, je suis revenu pour voir que les gens votent simplement et envoient du spam "ce n'est pas la réponse" dans les commentaires, ça me dérange pas mal avec les notifications. C'est vrai, ce n'est pas la réponse mais ça a été approuvé donc je ne peux rien y faire. Vérifiez la réponse de Hasnat Safder ci-dessous pour la solution.
Ce n'est pas la réponse à cette question
Il s'agit d'un problème de configuration et non d'un problème de syntaxe, voir la réponse ci-dessous par Hasnat safder.
Ce n'est pas la réponse à cette question. Voir le message de @Hasnat Safder ci-dessous pour une réponse correcte.
Avec Vue CLI 3, nous n'avons pas d' index.html dans le dossier src , vous pouvez donc
import 'material-design-icons-iconfont/dist/material-design-icons.css'
et importez-le dans le fichier main.js
npm install --save material-design-icons-iconfont
Je pense que cette réponse est en fait la réponse au problème car vuetify fournit naturellement v-icon. Le changement depuis vue-cli 3 rend cette réponse plus pertinente. Merci @Hasnat
C'est la bonne réponse! Je viens de faire un nouveau projet Vue-cli, en suivant le démarrage rapide de Vuetify et en copiant l'un de leurs modèles et icônes ne s'affichaient pas - et c'était la solution. Cela m'a pris du temps vraiment.
Cela fonctionne parfaitement avec Vue CLI 3 et Vuetify. Merci!
Ça a marché. Le document Vuetify devrait le souligner. ça m'a pris beaucoup de temps
J'ai utilisé du fil pour ajouter un matériau-design-icons-iconfont et importer après des travaux géniaux
cette solution fonctionne pour moi. Une autre solution utilisant fontawesome, suivez les étapes de la documentation officielle ici
Tu as sauvé ma journée, je ne savais pas qu'ils avaient changé son nom!
cela fonctionne grâce, également avec cette alternative, nous n'avons pas besoin d'ajouter un mdi- comme préfixe
Fonctionne comme un charme. Merci!
Vous pouvez faire face au même problème si vous utilisez Nuxt.js. Pour résoudre ce problème, vous devez déclarer les icônes Material Design dans votre CSS ... via le CDN, par exemple, comme ci-dessous:
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
}
]
Avait ce problème avec Vuetify 2.1.3 installé via le vuetify-loader 1.2.2
On dirait que les solutions précédentes ne fonctionnent pas car la bibliothèque d'icônes par défaut a été changée en mdi-font.
La solution était:
import '@mdi/font/css/materialdesignicons.css'
Et dans le fichier main.js (ou plugins/vueitfy.js s'il existe) ajoutez cette ligne sous les importations
yarn add @mdi/font
Ceci est également indiqué dans la documentation officielle - cependant, le problème est toujours là. La seule façon de faire fonctionner ces icônes est d'utiliser la solution @hasnat Safder fournie.
@Orochi, c'est quelque chose de bizarre qui se passe, je souhaite qu'ils le réparent
C'est la solution qui a fonctionné pour moi, pas de Hasnat Safder. Sauf, j'ai importé dans main.js car je ne trouve pas vuetify.js
Pour moi, les icônes étaient affichées en mode développement (npm run serve) mais PAS en production (npm run build). L'installation de polices avec 'npm install --save @ mdi / font "et l'importation dans vuetify.js ont sauvé ma journée.
Lisez les derniers documents publiés et incluez le code ci-dessous dans votre index.html
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
Aucune autre solution n'a fonctionné pour moi, à part cela.
Si vous utilisez Nuxt avec Vuetify et que les icônes de matériaux n'apparaissent pas dans Firefox:
css: ["@mdi/font/css/materialdesignicons.css"]
Ensuite, dans votre nuxt.config.js ajoutez l'entrée suivante à votre champ css :
npm install import @mdi/font
Vous pouvez importer tous les styles nécessaires
app.scss
@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"; @import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"; @import "https://fonts.googleapis.com/css?family=Material+Icons"; @import '~vuetify/dist/vuetify.css';
Une solution de @Hasnat Safder fonctionne pour moi, mais une commande dans main.js est importante:
import 'material-design-icons-iconfont/dist/material-design-icons.css'; import vuetify from './plugins/vuetify';
La manière du fil (similaire à la réponse de Hasnat):
import 'material-design-icons-iconfont/dist/material-design-icons.css';
et importez dans le fichier vuetify.js (ou main.js s'il n'existe pas) comme ceci:
yarn add material-design-icons-iconfont
A travaillé pour moi:
import '@mdi/font/css/materialdesignicons.css'
puis en plaçant ceci dans les plugins / vuetify.js:
npm install @mdi/font
Utilisation de "vuetify": "^ 2.3.19", "vue": "^ 2.6.12",
Vous avez accepté la mauvaise réponse. Êtes-vous en mesure de modifier votre sélection pour mieux aider les autres à trouver le bon résultat? stackoverflow.com/a/57535771/5735265 doit être le résultat accepté.