nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
  • Đăng nhập
logo nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
nhat.dev
No Result
View All Result
Home Lập trình

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

Nhat Tran by Nhat Tran
7 Tháng Chín, 2019
Font Awesome 5 Duotone Icons là gì? Có gì nổi bật
3.6k
SHARES
8.3k
VIEWS
Chia sẻ lên FacebookChia sẻ lên Twitter

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ó thể bạnquan tâm

Redis là gì?

Một số quy tắc và name class phổ biến cho Front-end Dev

UI component và layout hữu ích với Frontend Dev

Đọ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
Tags: fontfont awesome
Bài viết trước

Great Developer’s attitude: Tin tưởng quá trình

Bài viết sau

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

Nhat Tran

Nhat Tran

Chia sẻ vài thứ hay ho bản thân tìm hiểu và tìm kiếm được đến mọi người

Bài viết sau
Một số cách xử lý text-overflow với CSS

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

Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recommended.

PDCA là gì? Cách thực hiện PDCA trong công việc

PDCA là gì? Cách thực hiện PDCA trong công việc

8 Tháng Chín, 2019
Top 3 IDE được dùng nhiều nhất để Code PHP 2019

Hướng dẫn nâng cấp PHP 7.4 cho HocVPS Script

16 Tháng Hai, 2020

Trending.

Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

6 Tháng Chín, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Hướng dẫn tạo bộ cài vanilla hackintosh dễ dàng nhất

6 Tháng Ba, 2020
Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

2 Tháng Mười Một, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Phần cứng phù hợp với Hackintosh macOS

30 Tháng Mười Một, 2019
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Cài đặt Clover vào ổ cứng sau khi cài macOS

30 Tháng Mười Một, 2019
nhat.dev

© 2019 nhat.dev

Chia sẻ chút kiến thức, kinh nghiệm, thủ thuật mà bản thân đã tìm hiểu và đọc được với mọi người

  • About me
  • Privacy & Policy
  • Advertise
  • Contact

Theo dõi tôi

No Result
View All Result
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ

© 2019 nhat.dev

Xin chào

Sign In with Facebook
OR

Đăng nhập bằng SSO Nhatdev

Quên mật khẩu?

Create New Account!

Fill the forms below to register

All fields are required. Đăng nhập

Lấy lại mật khẩu

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Đăng nhập