Xin chào các bạn, mình mới quay lại làm blog thời gian gần đây hiện tại giao diện blog của mình vẫn chưa hoàn thiện và nội dung vẫn chưa nhiều. Hôm nay mình lượn lờ tìm một số thứ để edit theme thì mình vào trang fontawesome.com thấy bộ icons mới v6 nhưng hiện tại vẫn chỉ là alpha test và beta, nhưng để tải được về dùng thì bạn phải trả phí để dùng.

Bài viết này mình sẽ chia sẻ cho các bạn một số thông tin mới về Font Awesome v6 hiện tại về bản alpha test và beta, khi nào ra phiên bản official thì mình sẽ có một bài viết khác chi tiết hơn.

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Font Awesome Pro là bộ font Icon đẹp nhất dành cho website. Nhận các biểu tượng vectơ và biểu trưng xã hội trên trang web của bạn với Font Awesome, bộ công cụ và bộ biểu tượng phổ biến nhất trên web. Bộ Font Awesome 6 mới có 13.841 icons so với 7.864 icons của bộ Font Awesome 5 cũ.

Để sử Font Awesome 6 hiện tại thì bạn có thể thêm đoạn CDN dưới đây vào blog hoặc website của bạn. Đây là phiên bản Font Awesome 6 Pro alpha 3:

<link href="https://cdn.jsdelivr.net/gh/ngylduy/font-awesome-6-alpha3@05dd5aa/css/all.min.css" rel="stylesheet" type="text/css"/>

Sử dụng

Để sử dụng bạn truy cập https://fontawesome.com/v6.0/icons để lấy danh sách icons cũng như code để chèn vào blog/website của bạn.

Font Awesome 6 có 6 kiểu thuộc tính nhiều hơn Font Awesome 5 một thuộc tính mới là thuộc tính kiểu Thin bạn có thể xem bảng dưới đây:

Style Availability Style class @font-face weight Looks like
Solid Free Plan fa-solid 900
Regular Pro Plans only fa-regular 400
Light Pro Plans only fa-light 300
Thin Pro Plans only fa-thin 100
Duotone Pro Plans only fa-duotone 900
Brands Free Plan fa-brands 400

Sắp tới sẽ có thể một kiểu nữa gọi là Sharp, hiện tại chưa có.

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Có gì mới trong Font Awesome 6

Như đã nói ở trên Font Awesome 6 có thêm thuộc tính Thin và sắp tới sẽ có thêm thuộc tính Sharp thì sau đây là một số điểm mới khác của Font Awesome 6.

Thêm mới các icons Duotone

Thêm một lớp khác vào thiết kế của bạn với các biểu tượng duotone mới của chúng tôi, có sẵn như một phần của Font Awesome Pro . Những biểu tượng đẹp mắt này hoạt động hiệu quả bằng cách kế thừa màu cơ bản của dự án của bạn hoặc tùy chỉnh chúng theo cách bạn muốn.

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Thêm bộ biểu tượng nhận thức về COVID-19 miễn phí

Giúp phổ biến về các khuyến nghị vệ sinh và các sáng kiến khác để chống lại COVID-19! Sử dụng các biểu tượng này trong các dấu hiệu, lời nhắc, ứng dụng theo dõi,...

Mọi biểu tượng kiểu rắn trong bản phát hành này đều được sử dụng miễn phí và là mã nguồn mở.

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Thêm bộ biểu tượng chữ cái alphabet

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Thêm bộ biểu tượng Emoji

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Thêm bộ biểu tượng hoa quả

Font Awesome 6, thêm nhiều icons mới và bộ icons chủ đề chống lại COVID-19!

Thêm hiệu ứng chuyển động cho những icons

Hiệu ứng đập

Thuộc tính Chi tiết
--fa-beat-scale Đặt giá trị to tối đa của biểu tượng.

Hiệu ứng mờ dần

Thuộc tính Chi tiết
--fa-fade-opacity Đặt giá trị thấp nhất của biểu tượng sẽ mờ dần đi.

Hiệu ứng nhấp nháy

Thuộc tính Chi tiết
--fa-flash-opacity Đặt giá trị thấp nhất của biểu tượng sẽ mờ dần đi.
--fa-flash-scale Đặt giá trị to tối đa của biểu tượng.

Hiệu ứng lật

Thuộc tính Chi tiết
--fa-flip-x Đặt trục X của vector làm trục quay (0 hoặc 1)
--fa-flip-y Đặt trục Y của vector làm trục quay (0 hoặc 1
--fa-flip-z Đặt trục Z của vector làm trục quay (0 hoặc 1
--fa-flip-angle Đặt góc xoay, số dương quay theo chiều kim đồng hồ, số âm quay ngược chiều kim đồng hồ.

Hiệu ứng quay tròn

Thuộc tính Chi tiết
fa-spin Quay 360° theo chiều kim đồng hồ.
fa-spin-pulse Quay 360° theo chiều kim đồng hồ tăng dần trong 8 bước
fa-spin-reverse Khi sử dụng cùng với fa-spin hoặc fa-spin-pulse, làm cho nó quay ngược chiều kim đồng hồ.

Kết luận

Phía trên là một số thay đổi mới trong Font Awesome 6 cũng như chia sẻ mã CDN Font Awesome 6 Pro cho các bạn muốn dùng, tuy chưa cập nhật đầy đủ hết nhưng bài dài quá mình không muốn viết thêm cơ bản vì mình cũng lười, đợi ra bản chính thức thì mình sẽ viết một bài chi tiết và cẩn thận hơn cho các bạn!