Làm cách nào để sử dụng phông chữ Fontello?

Question

Theo một nguồn tin, đây là cách tôi sử dụng Fontello phông chữ:

Bây giờ nó tầm thường để thực hiện một webfont biểu tượng tùy chỉnh, chính xác cho các nhu cầu của bạn. Đầu tiên, chọn các biểu tượng bạn thích. Sau đó cập nhật mã glyph (tùy chọn) và tải xuống gói webfont của bạn. Fontello tạo mọi thứ bạn cần và sau đó bạn tải lên gói thông qua trang cấu hình của mô-đun này! Nó là dễ dàng!

OK. Giờ thì sao? Làm cách nào để gọi một trong các biểu tượng của họ trên trang web của tôi?

Answer 1

Bên trong gói, có thư mục "phông chữ" và thư mục "css".

1. Di chuyển thư mục phông chữ vào dự án của bạn. Dự án của bạn có thể trông giống như sau:

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

2. Bao gồm css Fontello. Bên trong thư mục "css" trong gói, bạn sẽ thấy:

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

   Trong hầu hết các trường hợp, bạn chỉ cần [yourfontname].css. Bao gồm biểu định kiểu đó trong dự án của bạn.

3. Bên trong [yourfontname].css là quy tắc @font-face nhập phông chữ. Đảm bảo đường dẫn đến phông chữ đang trỏ đến đúng vị trí. Theo mặc định, họ sẽ xem trong ../font/.

4. Để sử dụng biểu tượng, hãy thêm class="icon-ICON_NAME" vào phần tử bạn muốn có biểu tượng. Bạn có thể xem danh sách tên biểu tượng ở cuối số [yourfontname].css.

5. Tùy chọn: Fontello đặt margin-right: .2em vào biểu tượng vì bạn muốn sử dụng biểu tượng có văn bản nhưng đôi khi bạn có thể muốn biểu tượng độc lập. Tôi thích sử dụng <i> thẻ cho các biểu tượng độc lập, vì vậy tôi thêm các quy tắc sau đây để dưới cùng của fontello css:

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

   Bây giờ nếu bạn đặt class="icon-ICON_NAME"trên một <i> thẻ, nó sẽ không có bất kỳ biên độ không mong muốn .