Mithilfe von CSS -Symbolschriften wie Schriftart und Materialikonen können Sie mehrere Schritte in Ihre Webprojekte integrieren und stylen. Hier ist ein umfassender Ansatz zur Verwendung dieser Symbolschriften:
Aufnahme :
Font Awesome : Sie können Font Fantastien in Ihr Projekt entweder durch das Herunterladen des Kits und die direkte Verknüpfung oder mithilfe eines CDN aufnehmen. Wenn Sie sich für ein CDN entscheiden, müssen Sie lediglich die folgende Zeile in den Abschnitt Ihrer HTML" -Datei hinzufügen:
<code class="html"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"></code>
Materialsymbole : Um die Materialsymbole von Google zu verwenden, geben Sie die folgende Zeile in Ihr auf:
<code class="html"><link href="https://fonts.googleapis.com/icon?family=Material%20Icons" rel="stylesheet"></code>
Verwendung :
Um Symbole aus beiden Bibliotheken zu verwenden, fügen Sie einfach die entsprechende Klasse einem HTML -Element hinzu. Zum Beispiel:
<i class="fas fa-camera"></i>
<i class="material-icons">camera</i>
Styling :
Beide Bibliotheken ermöglichen es Ihnen, Symbole mit regulärem CSS zu stylen. Sie können Größe, Farbe und andere Eigenschaften wie jedes andere Textelement anpassen:
<code class="css">.fas.fa-camera { font-size: 24px; color: #3498db; } .material-icons { font-size: 24px; color: #e74c3c; }</code>
Zugänglichkeit :
Für eine bessere Zugänglichkeit sollten Sie alternative Text für Ihre Symbole einfügen. Dies kann mit dem aria-hidden
Attribut und <span></span>
mit sr-only
Klasse erreicht werden:
<code class="html"><i class="fas fa-camera" aria-hidden="true"></i> <span class="sr-only">Camera</span></code>
Um die Schriftart fantastisch in Ihre Website zu integrieren, befolgen Sie diese detaillierten Schritte:
Wählen Sie eine Integrationsmethode :
CDN : Die schnellste Methode besteht darin, die CDN von Font Awesome zu verwenden. Fügen Sie die folgende Zeile im Abschnitt Ihres HTML hinzu:
<code class="html"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"></code>
Download : Alternativ können Sie das fantastische Font -Paket herunterladen, es extrahieren und selbst hosten. Verknüpfen Sie die CSS -Datei wie diese:
<code class="html"><link rel="stylesheet" href="path/to/fontawesome/css/all.min.css"></code>
Verwenden Sie fantastische Symbole :
Nachdem Sie das Stylesheet einbezogen haben, können Sie ein HTML -Element für Schriftarten fantastische Symbole verwenden, indem Sie die entsprechenden Klassen hinzufügen:
<code class="html"><i class="fas fa-camera"></i></code>
fas
-Klasse gibt an, dass Sie den soliden Stil verwenden, und fa-camera
ist der Symbolname.Styling -Symbole :
Stilsymbole mit CSS, um ihre Größe, Farbe oder andere Eigenschaften zu ändern:
<code class="css">.fas.fa-camera { font-size: 24px; color: #3498db; }</code>
Zugänglichkeit :
Stellen Sie sicher, dass Ihre Symbole durch Einbeziehung alternativer Text zugänglich sind:
<code class="html"><i class="fas fa-camera" aria-hidden="true"></i> <span class="sr-only">Camera</span></code>
Ja, Materialsymbole können mithilfe von CSS für verschiedene Farben und Größen leicht angepasst werden. So wie: wie:
Änderung der Größe : Sie können die Größe eines Materialsymbols ändern, indem Sie die Eigenschaft font-size
einstellen:
<code class="css">.material-icons { font-size: 32px; }</code>
Farbe ändern : Um die Farbe zu ändern, ändern Sie die color
:
<code class="css">.material-icons { color: #2ecc71; }</code>
Kombinieren Sie mehrere Stile : Sie können sowohl Größe als auch Farbanpassungen kombinieren, um einen eindeutigen Look für Ihre Symbole zu erstellen:
<code class="css">.material-icons.custom-style { font-size: 28px; color: #3498db; }</code>
Verwenden Sie dann diese Klasse in Ihrem HTML:
<code class="html"><i class="material-icons custom-style">camera</i></code>
opacity
, transform
und transition
verwenden, um Ihre Materialsymbole weiter anzupassen.Sowohl die Schriftart als auch die Materialikonen sind gut geeignet für reaktionsschnelles Design, aber sie haben unterschiedliche Stärken:
Schriftart großartig :
font-size
angepasst wird, was perfekt für reaktionsschnelle Designs geeignet ist.Materialikonen :
font-size
skalierbar und passen gut in reaktionsschnelle Designs.Schlussfolgerung : Für reaktionsschnelles Design ist Font Awesome die bessere Wahl, wenn Sie nach einem breiteren Bereich von Symbolen und mehr Flexibilität bei der Anpassung suchen. Wenn Ihr Projekt jedoch den Materialdesignprinzipien folgt und Sie ein kohäsives Designsystem schätzen, wäre Materialikonen besser geeignet. Beide Bibliotheken eignen sich hervorragend zum reaktionsschnellen Design, und die Wahl hängt weitgehend von den spezifischen Anforderungen Ihres Projekts ab.
Das obige ist der detaillierte Inhalt vonWie benutze ich CSS -Symbolschriften (Schriftart fantastisch, Materialsymbole)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!