2019 Update hier:
Um Ihre Material-Symbole selbst zu hosten, die regulären, abgerundeten, scharfen, alle Varianten. Holen Sie sie sich aus diesem Repo:
https://github.com/petergng/material-icon-font
Aus irgendeinem Grund weiß ich nicht, warum diese Schriftarten über Google-Repositorys nicht leicht zugänglich sind.
Aber los geht's.
Gehen Sie nach dem Herunterladen des Pakets in den Ordner bin und Sie sehen die vier Varianten. Natürlich liegt es an Ihnen, was auch immer zu verwenden.
Um sie zu verwenden, erstellen Sie eine CSS-Datei und
- Generieren Sie für jede benötigte Variante eine Schriftart:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
Der urlLink verweist auf die Position der Symbole in Ihrem Projekt.
- Jetzt können Sie die Symbolklassen registrieren:
.material-icons-outlined, .material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Dadurch verwenden beide
.material-icons-outlined,
und
.material-iconsKlassen dieselben Standardeinstellungen. Wenn Sie verwenden möchten .material-icons-sharp, hängen Sie es einfach an die beiden Klassennamen an.
- Lassen Sie uns abschließend die Schriftart einstecken, die Sie aus Schritt 1 gezogen haben.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Um mehr Varianten wie Sharp zu verwenden, fügen Sie einfach den Block wie die beiden oben hinzu.
Sobald Sie fertig sind, gehen Sie zu Ihrem HTML-Code und verwenden Sie Ihre neu geprägten Symbole.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
