Jak używać czcionek fontello?

Question

Według jednego źródła, to w jaki sposób mogę używać czcionek Fontello:

Teraz jest trywialny zrobić zwyczaj ikona webfont, dokładnie do swoich potrzeb. Najpierw wybierz ikony, które Ci się podobają. Następnie zaktualizuj kody glifów (opcjonalnie) i pobierz pakiet webfont. Fontello generuje wszystko, czego potrzebujesz, a następnie przesyłasz pakiet za pośrednictwem strony konfiguracyjnej tego modułu! To takie proste!

OK. Co teraz? Jak mogę wywołać jedną z ich ikon na mojej stronie internetowej?

Answer 1

Wewnątrz pakietu znajduje się folder "font" i folder "css".

1. Przenieś folder czcionki do projektu. Twój projekt może wyglądać tak:

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

2. Dołącz css Fontello. Wewnątrz „css” w folderze wiązki, zobaczysz:

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

   W większości przypadków trzeba będzie [yourfontname].css tylko. Dołącz ten arkusz stylów do swojego projektu.

3. Wewnątrz [yourfontname].css jest reguła @font-face, która importuje czcionkę. Upewnij się, że ścieżki do czcionek wskazują właściwe miejsce. Domyślnie będą wyglądały w ../font/.

4. Aby użyć ikon, dodaj class="icon-ICON_NAME" do elementu, który ma mieć ikonę. Możesz zobaczyć listę nazw ikon na dole [yourfontname].css.

5. Opcjonalnie: Fontello kładzie margin-right: .2em na ikonie, ponieważ spodziewa się użyć ikony z tekstem, ale czasami warto autonomicznego ikonę. Lubię używać <i> tagów dla autonomicznych ikon, więc dodać następującą regułę do dołu css fontello:

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

   Teraz, jeśli umieścić class="icon-ICON_NAME"na <i> tagu, to nie będzie miał żadnego niepożądanego margines .