Chia sẽ kỹ thuật sử dụng Icon font trong việc thiết kế web

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 mình sẽ nói về một trong những kỹ thuật khá hay đó là dùng . 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à ra đời để khắc phục nhược điểm này. 137 f0c520ab0037807b85f55e9c0493024e Chia sẽ kỹ thuật sử dụng Icon font trong việc thiết kế web

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. Thay đổ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. Mình 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
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.

 

HTML:
<a href="shopping-cart.php"><span>s</span> View Cart</a>

 

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

 

Code:
.icon {
  font-family: 'your-chosen-icon-font';
}

 

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

 

HTML:
<a href="shopping-cart.php"> View Cart</a>

 

Code:
.icon {
  font-family: 'your-chosen-icon-font';
}

.cart:before {
  content: "s";
}

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: thuthuatwordpress.org

Cùng Danh Mục

Liên Quan Khác

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>