Kỹ thuật sử dụng icon font trong thiết kế web hiện đại

Ngày nay thiết kế web ngày càng phát triển và ngày càng có nhiều kỹ thuật mới được sử dụng, hôm nay Hutek sẽ nói về một trong những kỹ thuật khá hay đó là dùng icon font. Icon font là cách thức dùng những font chữ được thiết kế đặc biệt để thay thế cho các hình ảnh được dùng trong việc thiết kế website, đặc biệt với những website hỗ trợ responsive thì điều này càng cần thiết vì khi đó các hình ảnh cần có kích thước khác nhau trên các thiết bị khác nhau và nếu chỉ dùng một hình ảnh thì sẽ không thể tạo được sự sắc nét khi hiển thị với nhiều kích thước và icon font ra đời để khắc phục nhược điểm này.

​

Những lợi ích của Icon Fonts


Như chúng ta đã biết, ảnh bitmap thì hiển thị không tốt khi bị thay đổi kích thước, chúng ta sẽ thấy ảnh bị vỡ khi phóng to và mất chi tiết khi thu nhỏ và mỗi ảnh lại cần một http request khi load, điều này cũng góp phần làm giảm tốc độ load site của bạn. Và nếu muốn đẹp chắc chắn chúng ta phải dùng photoshop tạo ra nhiều kích cỡ, điều này quả thực là rất mất thời gian. Với font thì chúng ta không gặp phải những vấn đề này, font có thể phóng to thu nhỏ thoải mái, ko yêu cầu http request cho từng ký tự, thường chúng ta cứ nghĩ là font thì chỉ dùng để viết nhưng thực ra chúng có thể chứa trong mình các biểu tượng và chúng ta gọi những font như vậy là icon font

Dưới đây là 6 lý do chúng ta nên dùng icon font:

1. Phóng to thu nhỏ dễ dàng
2. Thayd đổi màu dễ dàng
3. Đổ bóng dễ dàng
4. Có thể làm trong suốt một cách dễ dàng
5. Các trình duyệt phổ biến đều hỗ trợ
6. Kích thước file nhỏ gọn

Cách dùng icon font

Đầu tiên là chúng ta phải tìm được font thích hợp và nhúng nó vào website. Hutek sẽ chỉ cho bạn một số nơi để bạn có thể dễ dàng tạo cho mình một bộ icon font ưng ý. Để nhúng vào website chúng ta dùng thuộc tính @font-face của css

Thường có 3 cách dùng icon font

• Đặt ký tự icon font trong thẻ html
• Dùng css để tạo ra nội dung chứa ký tự icon font
• Dùng thuộc tính data-icon

Đặt ký tự icon font trong thẻ html

Cách làm này rất đơn giản, có thể dùng một thẻ span để bao quanh ký tự cần dùng cho icon font và dùng css để gán icon font cho ký tự này.



Để ký tự hiển thị thành icon bạn cần dùng css như dưới đây


Dùng css để tạo ra nội dung chứa ký tự icon font




Nơi để tạo ra icon font

• Pictos
• Fico
• Sosa
• Foundation
• Symbolset
• IcoMoon
• Entypo
• Fontello
• ShiftIcons
• Heydings Controls
• A Delicious stack about icon fonts

Tóm lại
Icon không thể thay thế hoàn toàn image trong thiết kế web nhưng trong những trường hợp nhất định thì nó là một cách thông minh để thay thế cho image, icon font không phải ko có nhược điểm, có thể kể ra ở đây nhược điểm lớn nhất là chỉ dùng được 1 màu. Hy vọng là các bạn sau bài viết này biết cách áp dụng linh hoạt icon font cho website của mình.

Nguồn hutek.info