Es gibt mehrere Möglichkeiten, Symbole in HTML und CSS hinzuzufügen.
Am einfachsten ist es, HTML-Symbole zu verwenden und den entsprechenden HTML-Code zu kopieren und einzufügen. Zum Beispiel & # 9733; Zeigt das Sternsymbol an.
Laden Sie Symbolbilder von Websites wie FlatIcon herunter und verwenden Sie sie unverändert. ZB <img src = „ICON.PNG“ />
Verwenden Sie ein Schriftart-Icon-Set wie Webdings. Z.B. <p style = „font-family: Webdings“> ABC </p>
Schließlich laden und verwenden wir eine Schriftartenbibliothek wie Font Awesome.
1) Verwenden Sie HTML-Symbole
1-html-symbole.html
<div>
& # 9733; Stern!
</div>
<div>
& # 9730; das Wetter melden.
</div>
<div>
& # 9731; Du möchtest einen Schneemann bauen?
</div>
<div>
& # 9787; glückliches Gesicht.
</div>
Welche Magie ist das?Nun, html icons einfügen ein und es gibt viele davon, von Pfeilen über Symbole bis hin zu Währungen, Smileys und mehr Das Beste ist, dass es direkt aus dem eingebetteten HTML gebacken wird und Sie für diese Aufgaben keine Frameworks von Drittanbietern laden müssen.
Es ist sehr einfach zu bedienen. & # NUMMER; Es wird in die entsprechenden HTML-Symbole „übersetzt“. Ich werde einen Link für die vollständige Referenz im zusätzlichen Abschnitt unten hinterlassen. Darüber hinaus werden diese Symbole wie Text behandelt, Sie können ihre Größe mit der Schriftgröße steuern und Sie können auch Schriftstärke und Textdekorationen anwenden.
CSS-Hintergrund
Dies ist der Nachfolger der obigen Bildmethode, jedoch mit dem gesamten Symbolsatz in einem Bild. Zum Beispiel:
Statt Icons manuell einzeln als Bilder einzufügen, kommt hier CSS zum Einsatz.
2a-icon-set.html
<Stil>
.ico {
Anzeige: Inline-Block;
Breite: 32px;
Höhe: 30px;
Hintergrundbild: URL (‚icon-set.png‘);
Hintergrundwiederholung: keine Wiederholung;
}
.ico-Bildschirm {
Hintergrundposition: 0 0;
}
.ico-Telefon {
Hintergrundposition: -32px 0;
}
.ico-pc {
Hintergrundposition: -64px 0;
}
.ico-Tablet {
Hintergrundposition: 0 -31px;
}
.ico-Kamera {
Hintergrundposition: -32px -31px;
}
</style>
<i class = „ico ico-screen“> </i>
<i class = „ico ico-phone“> </i>
<i class = „ico ico-pc“> </i>
<i class = “ ico ico-tablet „> </i>
<i class =“ ico ico-camera „> </i>
Einige von euch denken vielleicht – warum bist du so dumm? Können wir nicht einfach Fotos verwenden? Dafür gibt es zwei Hauptgründe.
Es ist einfacher, Symbole mit CSS zu aktualisieren. Wenn Sie beispielsweise später die Breite / Höhe ändern möchten, müssen Sie dies nur einmal in Ihrem CSS ändern. Aber für Fotos müssen Sie die Größe nacheinander ändern.
Ein einzelner Satz von Bildern lädt schneller als 12 Bilder.