Menu

  • Trang chủ
  • Trending
  • Gợi ý bạn đọc

Chuyên mục

  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Cảm nhận cuộc sống

Liên hệ hợp tác

admin@genzakit.com
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả
  • Đăng nhập
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả

Font Awesome 5 Duotone Icons là gì? Có gì nổi bật

3.6k
CHIA SẺ
8.3k
LƯỢT XEM
Chia sẻ lên FacebookChia sẻ lên TwitterLưu lại trên Pinterest

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

Download Font Awesome 5.10.2

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

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
  <i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
  <i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
  <i class="fad fa-fill-drip"></i> <!-- a duotone style fill-drip icon -->
</div>

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

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
  <i class="fad fa-camera fa-swap-opacity"></i> <!-- a duotone style camera icon with swapped opacity -->
  <i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
  <i class="fad fa-fire-alt fa-swap-opacity"></i> <!-- a duotone style fire-alt icon with swapped opacity -->
  <i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
  <i class="fad fa-bus-alt fa-swap-opacity"></i> <!-- a duotone style bus-alt icon with swapped opacity -->
</div>

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

<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!--  primary layer's opacity set to 20% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!--  primary layer's opacity set to 40% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!--  primary layer's opacity set to 60% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!--  primary layer's opacity set to 80% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!--  primary layer's opacity set to 100% -->
</div>

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

<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i>  <!-- primary layer color defined -->
  <i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>  <!-- secondary layer color defined -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
  <i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
  <i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>

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

<div class="fa-3x">
  <i class="fad fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>

6. Custom thông qua CSS Internal

<style>
  .theme-ravenclaw {
    --fa-secondary-opacity: 1.0;
    --fa-primary-color: rgb(4, 56, 161);
    --fa-secondary-color: rgb(108, 108, 108);
  }
</style>
<div class="fa-3x">
  <i class="fad fa-hat-wizard theme-ravenclaw"></i>
  <i class="fad fa-flask-potion theme-ravenclaw"></i>
  <i class="fad fa-wand-magic theme-ravenclaw"></i>
  <i class="fad fa-scarf theme-ravenclaw"></i>
  <i class="fad fa-book-spells theme-ravenclaw"></i>
</div>

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

<i class="duotone-pseudo"></i>
<style>
.duotone-pseudo {
  font-size: 100px; /* for demo */
  position: relative; /* important */
  font-family: 'Font Awesome 5 Duotone'; /* important */
  font-weight: 900;
  font-style: normal; /* important when using i tag */
}
.duotone-pseudo:before {
  color: rgb(255,11,11);
  position: absolute; /* important */
  content: "\f55e";
}
.duotone-pseudo:after {
  color: rgb(105,105,105);
  content: "\10f55e"; /* important */
}
</style>

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 !

Source: Viblo
Từ khoá: fontfont awesome
Next Post

Một số cách xử lý text-overflow với CSS

Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Có thể bạn quan tâm

Mỳ cuốn tôm chiên giòn ngon hết sẩy

Mỳ cuốn tôm chiên giòn ngon hết sẩy

by Huệ Minh
25 Tháng Chín, 2021
0
2.6k

Bạn đã ăn “Mì tôm” như thế này bao giờ chưa? Mỳ cuốn tôm kèm nước sốt chấm...

Tiền đặt sai chỗ sẽ biến thành rác, nhân tài sai vị trí sẽ thành kẻ vô dụng: Quy tắc 5 giờ biến một người bình thường thành người “đáng gờm”

by Anthony Tran
26 Tháng Tám, 2020
0
2.6k

Thay vì nỗ lực mù quáng, hãy thực hiện đúng phương pháp để thay đổi cuộc sống Làm...

Cách làm cuốn váng đậu chay

Cách làm cuốn váng đậu chay

by Huệ Minh
23 Tháng Chín, 2021
0
2.6k

Món chay cuốn không những ngon mà còn lạ miệng, cách làm món chay đơn giản đến bất...

Lotion là gì? Lotion có công dụng như thế nào trong việc chăm sóc da?

Lotion là gì? Lotion có công dụng như thế nào trong việc chăm sóc da?

by Huệ Minh
19 Tháng Chín, 2021
0
2.6k

Lotion là một trong những mỹ phẩm dưỡng da được nhiều chị em tin dùng. Tuy nhiên lotion...

  • Giới thiệu
  • Liên hệ
  • Chính sách bảo mật

© 2023 Genzakit

Không có kết quả phù hợp
Xem tất cả kết quả
  • Trending
  • Gợi ý bạn đọc
  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Vui mỗi ngày
  • Cảm nhận cuộc sống

© 2022 Genzakit - Ngôi nhà giới trẻ

Chào mừng trở lại!

Đăng nhập bằng Facebook
Sign In with Google
OR

Đăng nhập

Quên mật khẩu?

Retrieve your password

Please enter your username or email address to reset your password.

Đăng nhập
wpDiscuz