Wir beginnen mit einer kleinen Anpassung des Logo-Typs, bevor wir dann Icons in die Hauptnavigation einfügen. Als wir die Navigation in Photoshop entwarfen (Video #007), haben wir die Icon-Schriftart Entypo verwendet. Jetzt werden wir sie auch im Web nutzen.
Wir lassen die Schriftart durch den Font Squirrel @font-face Generator laufen, um sicherzustellen, dass wir die Schriftart in allen benötigten Formaten erhalten.
Wir haben CSS3please verwendet, um die beste/neueste Version für die Verwendung von @font-face zu erhalten.
Wir beziehen uns auf diesen Beitrag auf CSS-Tricks über das aktuell beste HTML zur Verwendung von Icon-Schriftarten (beste Semantik, beste Zugänglichkeit). Im Wesentlichen wird es so aussehen:
<a href="/" class="home">
<span data-icon="k" aria-hidden="true"></span>
Home
</a>Wir hatten einige seltsame Probleme mit CodeKit, aber nichts, was ein kleines Beenden und Neustarten nicht beheben konnte!
Ich denke, es fehlt ein Screencast. Es wird nicht gezeigt, wie v10 eingerichtet wird, damit die Schriftarten geladen werden.
Das haben wir in Video #017 eingerichtet.
Danke Chris, ich genieße die Screencasts!
Übrigens, als ich gestern Entypo ausprobiert habe, bin ich auf Folgendes gestoßen… Ich bin sicher, es könnte nützlich sein: Entypo Zeichenübersicht
VIMEO!!!!!
Hah, Rodrigo, ich habe gerade nach der Entypo-Zeichenübersicht gesucht und wollte sie auch posten… Ich wusste, ich hätte zuerst die Kommentare lesen sollen.
Es gibt natürlich auch andere Icon-Sets, und ich weiß, dass Chris bereits über Icomoon geschrieben hat. Ich empfehle das wirklich, wenn Sie Ihre eigenen Sets erstellen müssen.
Ich habe ein Problem: In meiner Hauptnavigation wird das Icon für Picke und Hammer als Icon für die Musiknote angezeigt. An anderen Stellen existiert dieses Problem jedoch nicht. Also, stimmen nur in der Hauptnavigation die Icon-Zuordnungen nicht mit den Icons überein??
In IE v8 und Firefox wird die Picke und Hammer richtig angezeigt, aber nicht in Chrome Version 22.0.1229.94 m. Das Home-Icon (⌂) gemäß der Entypo-Zeichenübersicht funktioniert auch nicht in Chrome, aber in Firefox und IE8. Ich habe jedoch die veraltete Zeichenübersicht von Daniel Bruce für das Home-Icon verwendet und sie funktionierte in Chrome (ï), aber nicht in den beiden anderen Browsern. Irgendwelche Ideen?
Ich habe eine Nacht darüber geschlafen und am nächsten Tag war es gelöst, ich habe keine Ahnung, wie :)
Hallo, wie hast du die Hover-Stile und alles andere gemacht? Ich habe es verpasst. Oder es ist nicht da. Bitte lass es mich wissen.
Hallo Chris,
In diesem Video war die Schriftgröße für das Icon so groß, aber auf der Live-Seite erbt es ".main-nav a", aber es funktioniert trotzdem, warum? Ich bin verwirrt!
In dieser Serie haben wir Entypo verwendet. Entypo ist nett, aber die Icons waren aus irgendeinem Grund winzig. Ich hatte es lange auf meiner Liste, zurückzugehen und nur einen kleinen Satz von Icons zu laden, anstatt des gesamten Entypo-Sets. Ich habe es endlich geschafft, indem ich ein benutzerdefiniertes Set auf http://icomoon.io/ erstellt habe. Als ich dieses Set verwendete, waren die Icons normal groß, also habe ich die Schriftgröße unverändert gelassen.
Ich verstehe, vielen Dank für deine Zeit, mir das zu erklären.
Ich habe große Probleme mit dem Entypo-Schriftartzeug. Ich habe nachverfolgt, was du getan hast, bin auf Font Squirrel gegangen und die Test-/Demo-Datei, die du herunterlädst, war nur eine normale Schriftart.
Ich bin mir nicht sicher, warum es nicht funktioniert, aber es wird als normale Schriftart angezeigt und registriert nicht einmal, dass ich `@include font-stack-brand` zu `font-stack-icon` geändert habe.
Habs zum Laufen gebracht, indem ich die Zeichenzuordnung von entypo.com verwendet habe :P