Cách sử dụng icon font cho blog/website

Icon font ngày được sử dụng rộng rãi trong các website hiện nay. Icon font mang nhiều ưu điểm:

• Giảm số lượng HTTP Request, giúp website của bạn load nhanh hơn.
• Dễ dàng thay đổi màu sắc, kích thước của biểu tượng.
• Cung cấp nhiều biểu tượng phù hợp giúp bạn tiết kiệm thời gian thiết kế.
• Có thể sử dụng CSS3 như transition, transform, text-shadow giúp các icon được linh hoạt hơn.

Ta có thể nhúng icons vào trong CSS đơn giản như sau:

@font-face {
  font-family: 'your-fonts';
  src: url('fonts/your-fonts.eot');
  src: url('fonts/your-fonts.eot?#iefix') format('embedded-opentype'),
       url('fonts/your-fonts.woff') format('woff'),
       url('fonts/your-fonts.ttf') format('truetype'),
       url('fonts/your-fonts.svg#[set]Foundicons') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
[class*="icon-"] {
    font-family: 'your-fonts';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}
 
[class*="icon-"]:before {
  content: "your-fonts-character";
}

Trong bài viết này mình sẽ giới thiệu các bạn về IcoMoon và We Love Icon Fonts.[post_ad]

IcoMoon

IcoMoon cung cấp cho bạn hơn 450 icons miễn phí. Bên cạnh đó ngoài những icons của IcoMoon, IcoMoon cho phép bạn lựa chọn và tải các icons bạn muốn với những bộ icons khác như Broccolidry, Entypo, Font Awesome...với số lượng lên đến gần 3800 icons. Ngoài ra IcoMoon còn cho phép bạn tải các thiết kế của bạn lên (tập tin SVG) để customize thành fonts bạn yêu thích.

We Love Icon Fonts

We Love Icon Fonts là một mã nguồn mở và dịch vụ lưu trữ miễn phí các icon fonts. Cũng như IcoMoon, We Love Icon Fonts cũng cung cấp cho bạn rất nhiều bộ icons miễn phí khác như Fontelico, Maki, Typicons, Zocial.

Một số icons fonts miễn phí khác

• Entypo
• Font Awesome
• Foundation Icon
• Meteocons
• Typicons
• Raphaël Icon

Author : Admin

Share this

Related Posts