Font Awesome 5 Duotone Icons có gì hay ho ?

614

Người viết: Hoang Van Hung

Xin chào các bạn, chắc dân làm web chúng ta chẳng còn xa lạ gì với keyword fontawesome nữa rồi. Với phiên bản 5 xịn xò, FA ngày càng đa dạng với list icon đồ sộ thách thức mọi thư viện icon khác. Và từ version 5.10.0 trở đi chúng ta lại có thêm một lựa chọn tuyệt vời nữa đó là Duotone Icons. Vậy nó là gì và dùng như nào ? Hãy cùng mình tìm hiểu qua bài viết này

Lưu ý rất quan trọng đó là Duotone Icons tính tới hiện tại NOT FREE, đồng nghĩa với việc bạn phải mua gói Pro mới có thể sử dụng được list icon của nó.

Đọc đến đây chắc nhiều bạn thấy hơi hụt hẫng nhỉ, nhưng yên tâm có mình ở đây rồi bạn sẽ không mất đồng nào và vẫn có hàng xịn để dùng nhé =)

Vậy Duotone Icons là gì ? nó đơn giản được hiểu là “2 icon” gộp lại thành 1 để ta có thể custom color, opacity,… so với việc custom 1 icon truyền thống

Cài đặt

Sử dụng

Cũng như các anh em của nó Duotone Icons sử dụng class fad làm prefix.

Bạn có thể truy cập https://fontawesome.com/icons?d=gallery&s=duotone để lấy list icon cũng như code

1. Basic markup

2. Swapping Layer Opacity

Bạn có thể đảo ngược opacity bằng việc sử dụng thêm class fa-swap-opacity

3. Changing Opacity

FA sử dụng 2 biến –fa-primary-opacity (default 1) và –fa-secondary-opacity (default .4) cho Duotone Icons. Bạn có thể thay đổi chúng bằng việc sử dụng style như sau

4. Coloring Duotone Icons

Tương tự FA sử dụng 2 biến –fa-primary-color và –fa-secondary-color để chỉ định màu sắc cho 2 icon, trong trường hợp bạn muốn custom có thể sử dụng như sau

5. Kết hợp các biến

Bạn cũng có thể sử dụng kết hợp các biến để custom theo ý thích

6. Custom thông qua CSS Internal

7. Sử dụng với pseudo

Với pseudo code css có vẻ hơi dài nhưng cũng rất cần thiết cho một số trường hợp nhất định

Kết luận

Hết rồi đó 😃 thực ra cũng không có gì cao siêu đúng không. Trên đây mình đã hướng dẫn cho các bạn một style mới của FA và cách sử dụng.

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn.

Chúc bạn thành công và có những sản phầm tuyệt vời với FA Duotone Icons nhé ! Xin cảm ơn và hẹn gặp lại ở các bài viết sau !

Có thể bạn quan tâm:

Xem thêm việc làm Front-end Developers hấp dẫn nhất tại TopDev

TopDev via Viblo

  Tất tần tật các Frontend cheatsheets tốt nhất
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 1)