如何使用fontello字體？

Question

據一位消息人士透露，這是我如何使用Fontello字體：

現在是微不足道的做一個自定義圖標web字體，正好適合您的需求。首先，選擇你喜歡的圖標。然後更新字形代碼（可選），並下載您的webfont包。 Fontello生成您需要的所有內容，然後通過該模塊的配置頁面上傳捆綁包！這很簡單！

好的。怎麼辦？我如何在我的網頁上調用他們的圖標之一？

Answer 1

包內有「font」文件夾和「css」文件夾。

1. 將字體文件夾移動到您的項目中。你的項目可能是這個樣子：

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

2. 附上Fontello CSS。在裏面捆綁了「CSS」的文件夾，你會看到：

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

   在大多數情況下，你只需要[yourfontname].css。將該樣式表包含在您的項目中。

3. Inside [yourfontname].css是導入字體的@font-face規則。確保字體的路徑指向正確的位置。默認情況下，他們會查看../font/。

4. 要使用你的圖標，添加class="icon-ICON_NAME"到你想有一個圖標的元素。您可以在[yourfontname].css的底部看到圖標名​​稱列表。

5. 可選： Fontello把一個margin-right: .2em上的圖標，因爲它希望你對文本使用的圖標，但有時你可能需要一個獨立的圖標。我喜歡用的獨立圖標<i>標籤，所以我添加下面的規則到fontello CSS的底部：

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

   現在，如果你把class="icon-ICON_NAME"上<i>標籤，它不會有任何不必要的保證金。