Probleme bei der Verwendung von Symbolschriftarten mit CSS

Ich bin neu im Webdesign und der Entwicklung und habe mit verschiedenen Stylingtechniken herumgespielt. Im Laufe meiner Recherchen stieß ich auf Icon-Fonts. Obwohl ich eine Reihe von Tutorials und Videos untersucht habe, konnte ich Icon-Fonts trotz vieler Anstrengungen nicht erfolgreich einsetzen.Probleme bei der Verwendung von Symbolschriftarten mit CSS

Um zu starten, ging ich zu einer Website, die eine große Anzahl von Icon-Fonts bietet, wählte diejenigen, die ich mochte, generierte sie und schließlich in einen Ordner heruntergeladen. Aber jetzt, wo diese Icon-Fonts in einem Ordner sind, was soll ich tun?

Quelle

2012-10-29 Wil Prim

Verwenden Sie es wie eine normale Schrift: http://www.font-face.com Figur aus dem Charakter entspricht, Symbol, das Sie (Versuchen Sie Font Book/Character Viewer) – FeifanZ

http verwenden möchten: // inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/ Für was es wert ist, würde ich dagegen empfehlen. Wenn Sie eine Schriftart mit Symbolen verwenden, haben Sie sehr realen Text dahinter. Wenn es sich nicht um Text handelt, sollte keine Schriftart verwendet werden. Es gibt immer Sprites, Vektorbilder usw. – Brad

danke für die Kommentare. inspire48, es funktioniert, aber funktioniert es auch, wenn der Benutzer diese Schriftart nicht installiert hat? und Brad, ich werde in diese schauen danke –

Hier ist ein Schritt für Schritt Anleitung:

Zur Font Squirrel und laden Sie den @font-face-Kit. Entpacken Sie es, benennen Sie es in "Schriftarten" um und legen Sie es in das gleiche Verzeichnis wie Ihre HTML-Datei.

verwenden als HTML-Datei:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
    @font-face { 
    font-family: 'ModernPictogramsNormal'; 
    src: url('fonts/modernpics-webfont.eot'); 
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/modernpics-webfont.woff') format('woff'), 
     url('fonts/modernpics-webfont.ttf') format('truetype'), 
     url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
    } 
    li { 
     list-style-type: none; 
    } 
    [data-icon]:before { 
     font-family: 'ModernPictogramsNormal'; 
     content: attr(data-icon); 
     speak: none; 
     padding:0 5px; 
    } 
    </style> 
</head> 
<body> 
    <ul> 
    <li data-icon="^">RSS</li> 
    <li data-icon="*">Star</li> 
    <li data-icon=".">Shopping Cart</li> 
    </ul> 
</body> 
</html>

Sie sollten sehen:

Icon Font Example

Sie rollen!

Darüber hinaus, um zu wissen, welches Zeichen zu verwenden, überprüfen Sie die Zeichentabelle auf der Website Font Squirrel.

Quelle

2012-10-29 22:09:26 bookcasey

Super! Also nur für mehr Wissen, warum gibt es so viele URLs im @ font-face? Sind diese Links zu allen ihren Schriften? oder verschiedene Formate? –

Verschiedene Browser erfordern/sind in der Lage, verschiedene Arten von Font-Dateien zu verwenden (ich weiß, dass es für IE, .svg für iOS usw. ist). Es ist am besten, sie alle einzubeziehen. – bookcasey

Wie erkennt man, welche 'data-icon' Eigenschaft für welches Symbol ist, während ich nur die Dateien mit einem 'unicode' Attribut und einem Wert gegen' d' habe. Ich kann das nicht verstehen? – Ammar

Probleme bei der Verwendung von Symbolschriftarten mit CSS

Antwort

Verwandte Themen