CSS-Symbole mit Beispielen

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

2. Verwenden von CSS für benutzerdefinierte Symbole

Sie können auch Ihre eigenen Symbole mit CSS erstellen. Hier ist ein einfaches Beispiel mit reinem CSS:

Erstellen Sie eine grundlegende HTML-Struktur

<div class="icon-star"></div>

Fügen Sie CSS hinzu, um Ihr Symbol zu gestalten

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

Dieses CSS-Snippet erstellt mithilfe von Rahmen und Positionierung eine einfache Sternform.

3. SVG-Symbole

Sie können auch SVGs für hochwertige Symbole verwenden:

Inline SVG

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>

SVG als Hintergrundbild verwenden

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,...') no-repeat center center;
    background-size: contain;
}

Tipps

Größe und Farbe: Bei Schriftartsymbolen und Inline-SVGs können Sie die Größe mit den Eigenschaften „font-size“ oder „width“ und „height“ anpassen und bei SVGs die Farbe mit „color“ oder „fill“ ändern.
Barrierefreiheit: Berücksichtigen Sie immer die Barrierefreiheit, indem Sie bei Bedarf beschreibenden Text oder Arienattribute hinzufügen.
Experimentieren Sie ruhig und kombinieren Sie verschiedene Methoden, um herauszufinden, was für Ihr Projekt am besten funktioniert!

Das obige ist der detaillierte Inhalt vonCSS-Symbole mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!