Changer la taille de l'icône de conception du matériel
j'ai référencé ensuite déclaré une icône
<i class="material-icons">face</i>
Mais comment puis-je changer la taille de l'icône?
Sur oficial site https://design.google.com/icons/ je peux voir qu'ils l'aide de classes comme class="md-icon dp48" mais ça ne fonctionne pas dans mon cas.
7 réponses
en lisant le design des matériaux dans github j'ai trouvé ces trucs utiles qui pourraient vous aider.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
à partir du code ci-dessus, vous pouvez simplement modifier ou annuler les icônes CSS matérielles.
exemple de code:
<i class="material-icons md-18">face</i>
Plus de détails ici
si je fais un one-off, j'ajoute habituellement un style = modification à la taille de police de la balise. Mais oui longue histoire courte il n'y a pas de véritable astuce à part de définir vos propres styles de taille à attacher dans css comme une solution plus permanente.
<i class="material-icons" style="font-size: 50px">insert_invitation</i>
si vous utilisez scss
@mixin md-icon-size($size: 24px) {
font-size: $size;
height: $size;
width: $size;
}
.md-icon-16 {
@include md-icon-size(16px);
}
.md-icon-18 {
@include md-icon-size(18px);
}
.md-icon-24 {
@include md-icon-size(24px);
}
.md-icon-36 {
@include md-icon-size(36px);
}
vous pouvez changer la propriété font-size, elle reflètera sur l'icône parce que c'est une "icône de police"
Vous pouvez utiliser des css normaux, mais vous devez Outrepasser le style inline avec:
font-size: 50px !important;
parfois, le fait de définir la taille de la police ne réduit pas la taille de l'icône. Coz, la taille de police recommandée est soit 18, 24, 36 ou 48px.
essayez de définir les attributs" Hauteur"," Largeur"," ligne-hauteur " pour cette icône particulière. Cela peut vous aider.
il y a un attribut de taille associé à la balise d'icône comme check_circle
alors, en utilisant l'attribut de taille, nous pouvons changer la taille des icônes.