Wie verwende ich Fontello Schriftarten?

Question

Laut einer Quelle, das ist, wie ich Fontello Schriftarten verwenden:

Jetzt trivial es ist ein benutzerdefiniertes Symbol WebFont zu machen, genau für Ihre Bedürfnisse. Wählen Sie zuerst die Symbole aus, die Ihnen gefallen. Aktualisieren Sie dann die Glyphencodes (optional) und laden Sie Ihr Webfont-Paket herunter. Fontello generiert alles, was Sie brauchen, und Sie laden das Paket dann über die Konfigurationsseite dieses Moduls hoch! So einfach ist das!

Okay. Was jetzt? Wie rufe ich eines ihrer Symbole auf meiner Webseite auf?

Answer 1

Im Paket befinden sich der Ordner "font" und ein Ordner "css".

1. Verschieben Sie den Schriftordner in Ihr Projekt. Ihr Projekt könnte wie folgt aussehen:

   /project-root 
   -- /stylesheets 
   -- /images 
   -- /javascripts 
   -- /font

2. die Fontello css einschließen. Im Inneren des „css“ Ordner in dem Bündel, werden Sie sehen:

   [yourfontname]-codes.css 
   [yourfontname]-embedded.css 
   [yourfontname]-ie7-codes.css 
   [yourfontname]-ie7.css 
   [yourfontname].css

   In den meisten Fällen werden Sie nur [yourfontname].css benötigen. Fügen Sie das Stylesheet in Ihr Projekt ein.

3. Innerhalb [yourfontname].css ist die @font-face Regel, die die Schriftart importiert. Stellen Sie sicher, dass die Pfade zu den Schriftarten an die richtige Stelle zeigen. Standardmäßig werden sie in ../font/ suchen.

4. Um Ihre Symbole, fügen class="icon-ICON_NAME" zu einem Element, das ein Symbol haben wollen zu verwenden. Sie können die Liste der Symbolnamen am Ende von [yourfontname].css sehen.

5. Optional: Fontello setzt ein margin-right: .2em auf das Symbol, weil es Ihnen erwartet das Symbol mit Text zu verwenden, aber manchmal können Sie ein eigenständiges Symbol soll. Ich mag <i> Tags für Standalone-Symbole verwenden, so dass ich in den unteren Rand des fontello CSS die folgende Regel:

   i[class^="icon-"]:before, i[class*=" icon-"]:before { 
       margin: 0; 
   }

   Nun, wenn Sie class="icon-ICON_NAME"auf einem <i> Tag setzen, es werden keine unerwünschten Rand haben .