it-swarm.com.de

Ändern Sie die Symbolgröße der AngularJS-Materialsymbole

Ich habe darauf verwiesen und dann ein Icon deklariert

<i class="material-icons">face</i>

Aber wie kann ich die Symbolgröße ändern?

Auf der offiziellen Website https://design.google.com/icons/ Ich kann sehen, dass Klassen wie class="md-icon dp48" Verwendet werden, aber dies funktioniert in meinem Fall nicht.

39
sreginogemoh

Als ich das Materialdesign in Github las, fand ich diese nützlichen Dinge, die dir helfen könnten.

 /* 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); }

Im obigen Code können Sie die CSS-Symbole für Materialien einfach ändern oder überschreiben.

Beispielcode:

<i class="material-icons md-18">face</i>

Weitere Details hier

70
claudios

Wenn ich eine einmalige Aktion mache, füge ich normalerweise nur eine style = Modifikation zur Schriftgröße im Tag hinzu. Aber ja, lange Rede kurzer Sinn, es gibt keinen wirklichen Trick, außer Ihre eigenen Größenstile zu definieren, die Sie als dauerhaftere Lösung in CSS anfügen können.

<i class="material-icons" style="font-size: 50px">insert_invitation</i>
23
user1670304

wenn Sie scss verwenden

@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);
}
5
Kuncevič

Die Größe eines Materialise-Symbols lässt sich am besten ändern, indem der Klasse i ein Modifikator hinzugefügt wird:

<i class="material-icons small">menu</i>
<i class="material-icons medium">menu</i>
<i class="material-icons large">menu</i>

Weitere Informationen zum Ändern der Symbolgröße finden Sie auf der Materialise-Site unter den Symbolen.

2
M.A.Williams

Sie können normales CSS verwenden, müssen das Inline-Styling jedoch überschreiben mit:

font-size: 50px !important;

1
Patryk Ties

sie können die Schriftgrößeneigenschaft ändern. Sie wird auf dem Symbol angezeigt, da es sich um ein "FONT ICON" handelt.

0
Ahmad Mayo

Manchmal wird die Symbolgröße durch Festlegen der Schriftgröße nicht verringert. Coz, die empfohlene Schriftgröße ist entweder 18, 24, 36 oder 48px.

Versuchen Sie, die Attribute "Höhe", "Breite" und "Linienhöhe" für das jeweilige Symbol festzulegen. Das könnte helfen.

0
Jagann

Mit dem Symbol-Tag ist ein Größenattribut wie check_circle verknüpft

mit dem Größenattribut können wir also die Größe der Symbole ändern.

0
prat_bhan