/ / Zurb Foundation 4 Icon Schriftarten Setup - css, zurb-foundation, icon-fonts

Zurb Foundation 4 Icon Schriftarten Setup - css, zurb-foundation, icon-fonts

hoffe, es läuft gut.

Ich baue derzeit html / css Prototyp für eineWebsite mit Zurb Foundation 4. Ich benutze derzeit nur Sublime Text 3 und Internetbrowser, um das zu bauen. Ich bin sehr daran interessiert, die Icon-Sets der Zurb Foundation zu verwenden, aber ich bin momentan nicht in der Lage, sie zur Anzeige zu bringen Scout for sass installiert, ich hoffe, dass ich den Text-Editor und den Browser weiter verwenden kann, um diesen Prototyp aufzubauen. Während ich das Icon-Paket von der Webseite der Zurb-Stiftung herunterladen konnte, ist mir nicht klar, wie ich diese Dateien in mein aktuelles Projekt strukturieren soll. Mein Projekt als folgende Ordner- / Dateistruktur:

  • css (enthält foundation.css, foundation.min.css, normalize.css)
  • img (enthält .gitkeep)
  • js (enthält Foundation- und Vendor-js-Dateien)
  • index.html

Die Symbole der Zurb-Stiftung werden mit verschiedenen Dateien geliefertTypen einschließlich .css, .eot, .svg, .woff und andere, einschließlich eines Ordners namens "svgs", in dem diese Symbolschriftarten untergebracht zu sein scheinen. Ich habe versucht folgendes zu tun:

  1. Legen Sie den Inhalt des Symbols für die Foundation-Symbolschrift in css meines Projekts ab
  2. Linked-Style-Icon-Stylesheet auf der HTML-Seite
  3. Im HTML habe ich "" eingegeben, um ein Icon zu testen

Während das Panel Gehäuse-Symbol wurde leicht erhaltengrößer, das Symbol wurde nicht angezeigt. Ist es möglich, die Icon-Fonts mit dem Ausführen und Kompilieren von Sass zu verwenden? Könnte ich es einfach tun html / css oder brauche ich Edelstein und Kompass läuft? Ich bin mit der Verwendung von Icon-Fonts und der Implementierung vertraut, aber ich bin mir nicht sicher, wie ich es einrichten soll.

Könnte jemand bitte eine Ordnerstruktur vorschlagenund einfache Anweisungen, wie die Dateien, die im Foundation-Icon-Paket enthalten sind, zu einem basic-zub-Projekt hinzugefügt werden (so wie das grundlegende Projekt, das Sie beim Herunterladen der zurb foundation von ihrer Site erhalten)?

Vielen Dank im Voraus, Ihre Hilfe wird sehr geschätzt.

Antworten:

0 für die Antwort № 1

Ich konnte die Icons zum Laufen bringen. Ich habe den Paketinhalt der Foundation Icons in einen separaten Ordner gelegt. Ich habe die Symbole nicht richtig ausgerichtet. Während das Beispiel der Zurb-Foundation ein Beispiel-Icon als allgemein bezeichnet hat foundicon-settings, die SVG-Symbole haben Namen wie fi-clipboard-notes oder fi-calendar. Ich fügte meinem benutzerdefinierten Stylesheet CSS-Klassen hinzu, sodass ich die Größe des Symbols schnell anpassen konnte, indem ich die Schriftgröße des Elements nutzte.