fonts
Icon-Schriften
Suche…
Einfügen einer Symbolschriftart auf einer Webseite
Um eine Symbolschriftart in Ihr CSS aufzunehmen, können Sie den folgenden Code einfügen:
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
Verwenden einer Symbolschriftart auf einer Webseite
Um ein Symbol in Ihrem HTML-Code zu verwenden, haben Sie folgende Möglichkeiten:
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
Wenn Sie sich für Methode 7 entscheiden möchten, benötigen Sie zusätzlichen CSS-Code. Dieser CSS-Code würde folgendermaßen aussehen:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Symbolzeichensätze wie Iconic , Font Awesome oder Glyphicons verwenden normalerweise die Methode 7. Damit vermeiden Sie das Kopieren und Einfügen von Sonderzeichen aus einem Spickzettel oder die Verwendung von HTML-Entitäten.
Es ist jedoch eine Methode, die mehrere Nachteile hat. :before allem erfordert es Unterstützung für :before CSS-Selektor und die Verwendung einer Escape-Sequenz für UNICODE-Zeichen. Weder IE6-7 noch bestimmte Versionen von Webkit bieten diese Unterstützung.
Ein weiterer Nachteil ist, dass Sie für jedes Symbol ein separates HTML-Tag verwenden müssen, wobei jedes Tag einem Zeichen aus der Symbolschriftart entspricht. Die Anzeige mehrerer Symbole innerhalb eines HTML-Tags ist bei Methode 7 im Gegensatz zu anderen Methoden nicht möglich.
Andere Methoden haben jedoch ihre eigenen Nachteile. Bei den Methoden 1, 3 und 5 müssen Sie das Zeichen aus einem Spickzettel kopieren oder einfügen oder mit Mitteln das Zeichen selbst in Ihren Code einfügen. Ihr Code-Editor ist möglicherweise nicht in der Lage, das Zeichen anzuzeigen, oder es zeigt möglicherweise ein anderes Zeichen als das Symbol in Ihrer Symbolschriftart an, wenn die Symbolschriftart eine nicht standardmäßige Zuordnung dieses Zeichens verwendet.
Die Methoden 1, 3 und 5 setzen auch voraus, dass Ihr Browser die richtige Kodierung verwendet, um das richtige Zeichen anzuzeigen. Bei UNICODE-Zeichen ist dies nicht so offensichtlich wie bei ASCII-Zeichen. Dies sollte jedoch sichergestellt werden, indem Sie das Meta-Tag <meta charset="utf-8" /> irgendwo im head Ihres HTML-Dokuments einfügen.
Die Methoden 2, 4 und 6 erfordern nicht das Kopieren und Einfügen des Zeichens, jedoch wird der Code für den Menschen weniger lesbar und Änderungen am Code sind anfälliger für menschliche Fehler. Außerdem müssen Sie den HTML-Entity-Code für jedes der Symbole, die Sie verwenden möchten, nachschlagen oder Sie müssen sich diese merken. Dasselbe gilt natürlich auch für die in Methode 7 verwendeten Klassen. Diese Klassen sind jedoch viel einfacher zu speichern als ein HTML-Entitätscode.
Einschließen eines bestimmten Symbols auf einer Webseite
Betrachten Sie ein nach unten zeigendes Dreieck.
Es gibt mehrere Möglichkeiten, dieses Symbol auf einer Webseite anzuzeigen.
Methode 1: Verwenden Sie eine dezimale HTML-Entität
HTML:
▼
Methode 2: Verwenden Sie eine hexadezimale HTML-Entität
HTML:
▼
Methode 3: Zeichen direkt verwenden
HTML:
▼
Methode 4: Verwenden Sie CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Jede dieser drei Methoden sollte dieselbe Ausgabe haben. Für andere Symbole gibt es die gleichen drei Optionen. Einige haben sogar eine vierte Option, mit der Sie eine String-basierte Referenz verwenden können (z. B. ♥ zur Anzeige von ♥).
Sie können eine Referenz-Website wie Unicode-table.com verwenden, um herauszufinden, welche Symbole in UNICODE unterstützt werden und mit welchen Codes sie übereinstimmen. Beispielsweise finden Sie die Werte für das nach unten zeigende Dreieck unter http://unicode-table.com/de/25BC/ .
Beachten Sie, dass diese Methoden nur für Symbole ausreichen, die standardmäßig in jedem Browser verfügbar sind. Bei Symbolen wie ☃, ❄, ★, ☂, ☭, ⎗ oder ⎘ ist dies viel weniger wahrscheinlich. Es ist zwar möglich, Browserübergreifend für andere UNICODE-Symbole zu unterstützen, Sie müssen jedoch eine Symbolschriftart erwerben oder eine eigene erstellen. Siehe Erstellen einer eigenen Schriftart für weitere Informationen, wie Sie Ihre eigene Schriftart erzeuge.
Beliebte Symbolschriftarten
Im Folgenden finden Sie eine Liste der beliebtesten Symbolschriftarten: