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

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 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ó.

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.

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ở.

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

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

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

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!