Font awesome là gì? cách sử dụng font awesome

0
41

Thứ năm, 14/05/2020 | 00:00 GMT+7

Cách sử dụng Font Awesome 5 với React

Font Awesome là một bộ dụng cụ giành cho các website phân phối các biểu tượng & biểu trưng xã hội. React là một thư viện mã hóa được sử dụng để tạo giao diện user . Dù rằng group Font Awesome đã tạo thành phần React để tác động tích hợp, nhưng có một số phép tắc căn bản để hiểu về Font Awesome 5 & cách cấu tạo của nó. Trong chỉ dẫn này, bạn sẽ tìm hiểu cách sử dụng thành phần React Font Awesome.

Yêu cầu

Không cần viết mã cho chỉ dẫn này, nhưng nếu bạn mong muốn thí nghiệm với một số chẳng hạn, bạn cần những điều sau:

Bước 1 – Sử dụng Font Awesome

Group Font Awesome đã tạo một thành phần React để bạn có thể sử dụng hai thành phần này bên cạnh nhau. Với thư viện này, bạn có thể học theo chỉ dẫn sau thời điểm chọn biểu tượng của các bạn .

Trong chẳng hạn này, ta sẽ sử dụng biểu tượng home & thực hiện mọi thứ trong file App.js :

src / App.js

import React from "react"; import { render } from "react-dom";  // get our fontawesome imports import { faHome } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";  // create our App const App = () => (   
); // render to #root render(, document.getElementById("root"));

Ứng dụng của các bạn hiện có biểu tượng home page nhỏ. Bạn sẽ nhận ra rằng mã này chỉ chọn biểu tượng home để chỉ một biểu tượng được thêm vào kích cỡ gói của ta .

Hiện tại, Font Awesome sẽ bảo đảm thành phần này sẽ tự thay thế bằng version SVG của biểu tượng đó sau thời điểm thành phần này được mount .

Bước 2 – Chọn biểu tượng

Trước khi setup & sử dụng các biểu tượng, điều trọng yếu là phải biết cách cấu tạo các thư viện Font Awesome. Vì có nhiều biểu tượng nên group đã quyết định chia chúng thành nhiều gói.

Khi chọn & chọn biểu tượng nào bạn mong muốn, chúng ta nên truy cập trang biểu tượng Font Awesome để tìm hiểu các tùy chọn của các bạn . Bạn sẽ thấy các bộ lọc khác nhau để lựa chọn xuôi theo bên trái của trang. Các bộ lọc này rất trọng yếu vì chúng sẽ cho biết gói để nhập biểu tượng của các bạn từ đó.

Trong chẳng hạn trên, ta đã kéo biểu tượng home ra khỏi gói @fortawesome/free-solid-svg-icons .

Xác nhận gói biểu tượng nào thuộc về

Bạn có thể biết biểu tượng thuộc về gói nào bằng cách xem lại các bộ lọc ở bên trái. Bạn cũng có thể bấm vào biểu tượng & xem gói chứa nó.

Một khi bạn biết gói nào thuộc về phông chữ, điều trọng yếu là phải nhớ cách viết tắt ba chữ cái cho gói đó:

  • Phong cách rắn – fas
  • Phong cách thông thường – far
  • Phong cách ánh sáng – fal
  • Duotone Style – fad

Bạn có thể tìm kiếm một loại rõ ràng và cụ thể từ trang biểu tượng:

Sử dụng các biểu tượng từ các gói rõ ràng và cụ thể

Nếu bạn duyệt qua trang biểu tượng Font Awesome , bạn sẽ nhận ra rằng thường có nhiều version của cùng một biểu tượng. Chẳng hạn: hãy xem biểu tượng boxing-glove :

Để sử dụng một biểu tượng rõ ràng và cụ thể, bạn cần bố trí . Sau đây là nhiều loại biểu tượng giống nhau từ các gói khác nhau. Chúng bao gồm các viết tắt ba chữ cái đã bàn bạc trước đây.

Cảnh báo: Các chẳng hạn sau sẽ không hoạt động cho đến khi ta tạo thư viện biểu tượng trong một vài phần.

Đây là một chẳng hạn về version rắn:

 

Điều này mặc định là version rắn nếu một loại không được chỉ định:

 

& version nhẹ sử dụng fal :

; 

Ta đã phải chuyển điểm tựa icon mình thành một mảng thay vì một chuỗi dễ dàng.

Bước 3 – Thiết lập Font Awesome

Vì có nhiều version của một biểu tượng, nhiều gói & gói Free / chuyên nghiệp nên việc setup chúng đều liên quan đến nhiều hơn 1 gói npm . Bạn có thể cần phải setup bội số & sau đó chọn các biểu tượng bạn mong muốn.

So với nội dung này, ta sẽ setup mọi thứ để ta có thể trình bày cách setup nhiều gói.

Chạy lệnh sau để setup các gói nền tảng:

  • npm ι -Ş @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Chạy các lệnh sau để setup các biểu tượng thông thường:

  • # regular icons
  • npm ι -Ş @fortawesome/free-regular-svg-icons
  • npm ι -Ş @fortawesome/pro-regular-svg-icons

Chúng sẽ setup các biểu tượng rắn:

  • # solid icons
  • npm ι -Ş @fortawesome/free-solid-svg-icons
  • npm ι -Ş @fortawesome/pro-solid-svg-icons

Sử dụng lệnh này cho các biểu tượng ánh sáng:

  • # light icons
  • npm ι -Ş @fortawesome/pro-light-svg-icons

Thao tác này sẽ setup các biểu tượng duotone:

  • # duotone icons
  • npm ι -Ş @fortawesome/pro-duotone-svg-icons

Cuối cùng, điều này sẽ setup các biểu tượng tên thương hiệu:

  • # brand icons
  • npm ι -Ş @fortawesome/free-brands-svg-icons

Hoặc, nếu bạn mong muốn setup toàn bộ chúng trong một lần, bạn có thể sử dụng lệnh này để setup các bộ biểu tượng Free:

  • npm ι -Ş @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Nếu bạn có tài khoản chuyên nghiệp với Font Awesome, bạn có thể sử dụng cách sau để setup toàn bộ các biểu tượng:

  • npm ι -Ş @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

Bạn đã setup các gói nhưng chưa sử dụng chúng trong ứng dụng của các bạn hoặc chưa thêm chúng vào các gói ứng dụng của ta . Hãy xem cách bạn có thể làm điều đó trong bước kế tiếp.

Bước 4 – Tạo Thư viện Biểu tượng

Có thể rất tẻ nhạt khi nhập biểu tượng bạn mong muốn vào nhiều file . Giả sử bạn sử dụng biểu tượng Twitter ở nhiều nơi, bạn không mong muốn phải viết nhiều lần.

Để nhập mọi thứ vào một nơi, thay vì nhập từng biểu tượng vào từng file tách biệt, ta sẽ tạo một thư viện Font Awesome .

Hãy tạo fontawesome.js trong folder src & sau đó nhập nó vào index.js . Hãy dễ chịu thêm file này vào bất cứ nơi nào miễn là các thành phần bạn mong muốn sử dụng trong các biểu tượng có quyền truy cập (là các thành phần con). Bạn thậm chí có thể làm điều này ngay trong index.js hoặc App.js . Không những thế, có thể tốt hơn nếu chuyển file này ra một file riêng vì nó có thể lớn:

src / fontawesome.js

// import the library import { library } from '@fortawesome/fontawesome-svg-core';  // import your icons import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons'; import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';  library.add(   faMoneyBill,   faCode,   faHighlighter   // more icons go here ); 

Nếu bạn đã thực hiện việc này trong file riêng của nó, thì bạn cần nhập vào index.js :

src / index.js

import React from 'react'; import { render } from 'react-dom';  // import your fontawesome library import './fontawesome';  render(, document.getElementById('root')); 

Nhập toàn thể gói biểu tượng

Bạn không nên nhập toàn thể gói vì bạn đang nhập từng biểu tượng đơn lẻ vào ứng dụng của các bạn , điều này có thể gây ra kích cỡ gói lớn. Nếu bạn cần trọng yếu hóa toàn thể gói, bạn chắc nịch có thể.

Trong chẳng hạn này, giả sử bạn mong muốn có toàn bộ các biểu tượng tên thương hiệu trong @fortawesome/free-brands-svg-icons . Bạn sẽ sử dụng phần sau để nhập toàn thể gói:

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core'; import { fab } from '@fortawesome/free-brands-svg-icons';  library.add(fab); 

fab đại diện cho toàn thể gói biểu tượng tên thương hiệu.

Nhập từng biểu tượng

Cách được đề nghị để sử dụng các biểu tượng Font Awesome là nhập từng biểu tượng một để kích cỡ gói cuối cùng của các bạn càng nhỏ càng tốt, vì bạn sẽ chỉ nhập những gì bạn cần.

Bạn có thể tạo một thư viện từ nhiều biểu tượng từ các gói khác nhau như sau:

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';  import { faUserGraduate } from '@fortawesome/pro-light-svg-icons'; import { faImages } from '@fortawesome/pro-solid-svg-icons'; import {   faGithubAlt,   faGoogle,   faFacebook,   faTwitter } from '@fortawesome/free-brands-svg-icons';  library.add(   faUserGraduate,   faImages,   faGithubAlt,   faGoogle,   faFacebook,   faTwitter ); 

Nhập cùng một biểu tượng từ nhiều kiểu

Nếu bạn mong muốn có toàn bộ các loại boxing-glove cho gói fal , far & fas , bạn có thể nhập toàn bộ chúng dưới dạng một tên khác & sau đó thêm chúng.

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core'; import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons'; import {   faBoxingGlove as faBoxingGloveRegular } from '@fortawesome/pro-regular-svg-icons'; import {   faBoxingGlove as faBoxingGloveSolid } from '@fortawesome/pro-solid-svg-icons';  library.add(     faBoxingGlove,     faBoxingGloveRegular,     faBoxingGloveSolid ); 

Sau đó, bạn có thể sử dụng chúng bằng cách triển khai các tiền tố khác nhau:

   

Bước 5 – Sử dụng các biểu tượng

Đến đây bạn đã setup những gì bạn cần & đã thêm các biểu tượng của các bạn vào thư viện Font Awesome, bạn đã sẵn sàng sử dụng chúng & chỉ định kích cỡ. Trong chỉ dẫn này, ta sẽ sử dụng gói light ( fal ).

Chẳng hạn trước nhất này sẽ sử dụng kích cỡ bình bình:

 

Chẳng hạn thứ hai có thể sử dụng định cỡ được đặt tên , sử dụng các chữ viết tắt của small ( sm ), medium ( md ), large ( lg ) & extra-large ( xl ):

    

Tùy chọn thứ ba là sử dụng kích cỡ được đánh số có thể lên đến 6 :

     

Khi sử dụng định cỡ được đánh số, bạn cũng có thể sử dụng số thập phân để tìm kích cỡ hoàn hảo:

 

Font Awesome tạo kiểu cho SVG mà nó sử dụng bằng cách lấy màu văn bản của CSS. Nếu bạn đặt

ở nơi biểu tượng này hiện ra, màu của đoạn văn sẽ là màu của biểu tượng:

 

Font Awesome cũng có chức năng thay đổi sức mạnh , nơi bạn có thể xâu chuỗi các biến biến tấu nhau với nhau:

 

Bạn có thể sử dụng bất kỳ thay đổi nào được tìm ra trên website Font Awesome . Bạn có thể sử dụng điều này để di chuyển các biểu tượng lên, xuống, sang trái hoặc sang phải để có được địa điểm hoàn hảo bên cạnh văn bản hoặc bên trong các node .

Các biểu tượng chiều rộng cố định

Khi sử dụng các biểu tượng ở một địa điểm mà toàn bộ chúng cần phải có cùng chiều rộng & đồng nhất, Font Awesome cho phép ta sử dụng giá đỡ fixedWidth . Chẳng hạn: giả sử bạn cần chiều rộng cố định cho danh sách thả xuống của các bạn :

        

Biểu tượng quay

Spinning hữu dụng để triển khai trên các node biểu mẫu khi biểu mẫu đang giải quyết. Bạn có thể sử dụng biểu tượng con quay để tạo hiệu ứng tải đẹp mắt:

 

Bạn có thể sử dụng trụ spin trên bất kể thứ gì!

 

Chuyên sâu: Biểu tượng mặt nạ

Font Awesome cho phép bạn phối hợp hai biểu tượng để tạo hiệu ứng với mặt nạ . Bạn xác nhận biểu tượng bình bình của các bạn & sau đó sử dụng mask chống để xác nhận một biểu tượng thứ hai để đặt trên cùng. Biểu tượng trước nhất sẽ bị hạn chế trong biểu tượng mặt nạ.

Trong chẳng hạn này, ta đã tạo bộ lọc thẻ bằng cách sử dụng mặt nạ:

 

Cảnh báo cách bạn có thể xâu chuỗi nhiều đạo cụ transform lại với nhau để di chuyển biểu tượng bên trong cho đủ với biểu tượng mặt nạ.

Ta thậm chí còn tô màu & biến đổi logo nền bằng Font Awesome:

Bước 6 – Sử dụng react-fontawesome & các biểu tượng bên ngoài React

Nếu toàn thể website không phải là ứng dụng một trang (SPA), & thay vào đó, bạn có một website truyền thống & đã thêm React ở trên cùng . Để tránh nhập thư viện SVG / JS chính & cả thư viện react-fontawesome , Font Awesome đã tạo nên một cách để sử dụng các thư viện React để theo dõi các biểu tượng bên ngoài các thành phần React.

Nếu bạn có , ta có thể yêu cầu Font Awesome xem & update những thứ đó bằng cách sử dụng các cách sau:

import { dom } from '@fortawesome/fontawesome-svg-core'  dom.watch() // This will kick off the initial replacement of ι to svg tags and configure α MutationObserver 

MutationObserver ‘s là một công nghệ website cho phép ta theo dõi DOM để biết các biến đổi một cách hiệu quả. Tham khảo thêm về kỹ thuật này trên ebook về React Font Awesome .

Tổng kết

Sử dụng Font Awesome & React bên cạnh nhau là một sự phối hợp tuyệt vời, nhưng tạo thành nhu cầu sử dụng nhiều gói & xem xét các phối hợp khác nhau. Trong chỉ dẫn này, bạn đã tìm hiểu một số cách có thể sử dụng Font Awesome & React bên cạnh nhau.

Các tin liên quan


Bài 11: Sử dụng icon Font awesome


Đọc thêm nội dung thuộc chuyên đề: Kiến thức lập trình
Xem thêm bài viết thuộc chuyên mục: Kiến thức lập trình
XEM THÊM  Phần 1: Tác giả Tố Hữu (Ngắn gọn nhất)