Cách sử dụng Font Awesome 5 với React – sử dụng font awesome trong photoshop – phptravels.vn

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 ra 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 kết cấu của nó. Trong chỉ dẫn này, bạn sẽ tìm tòi cách sử dụng thành phần React Font Awesome.

Bạn đang xem: sử dụng font awesome trong photoshop

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 kết cấu của nó. Trong chỉ dẫn này, bạn sẽ tìm tòi 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 nhau. Với thư viện này, bạn có thể học theo chỉ dẫn sau khoảng thời gian 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 = () => (   <divvàgt;     <FontAwesomeIcon icon={faHome} />   </divvàgt; );  // render to #root render(<App />, document.getElementById("root")); 

Ứng dụng của các bạn hiện có biểu tượng trang chính nhỏ. Bạn sẽ nhận biết 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 .

Giờ đây, 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 khoảng thời gian thành phần này được mount .

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

Trước khi seting & sử dụng các biểu tượng, điều trọng yếu là phải biết cách kết cấu 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 tòi 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ể nhấn 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 thái rắn – fas
  • Phong thái thông thường – far
  • Phong thái á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 biết 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í <FontAwesomeIconvàgt; . 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 đã luận bàn trước đây.

Chú ý: 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:

<FontAwesomeIcon icon={['fas', 'code']} /> 

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

<FontAwesomeIcon icon={faCode} /> 

& version nhẹ sử dụng fal :

<FontAwesomeIcon icon={['fal', 'code']} />; 

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

Bước 3 – Seting 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 seting chúng đều liên quan đến nhiều hơn 1 gói npm . Bạn có thể cần phải seting bội số & sau đó chọn các biểu tượng bạn mong muốn.

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

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

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

Chạy các lệnh sau để seting 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ẽ seting 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ẽ seting các biểu tượng duotone:

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

Cuối cùng, điều này sẽ seting 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 seting toàn bộ chúng trong một lần, bạn có thể sử dụng lệnh này để seting 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 để seting 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 đã seting 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ế đến.

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 . Bên cạnh đó, 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(<App />, 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 cú 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:

<FontAwesomeIcon icon={['fal', 'boxing-glove']} /> <FontAwesomeIcon icon={['far', 'boxing-glove']} /> <FontAwesomeIcon icon={['fas', 'boxing-glove']} /> 

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

Đến đây bạn đã seting 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 tiên này sẽ sử dụng kích cỡ bình bình:

<FontAwesomeIcon icon={['fal', 'code']} /> 

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 ):

<FontAwesomeIcon icon={['fal', 'code']} size="sm" /> <FontAwesomeIcon icon={['fal', 'code']} size="md" /> <FontAwesomeIcon icon={['fal', 'code']} size="lg" /> <FontAwesomeIcon icon={['fal', 'code']} size="xl" /> 

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

<FontAwesomeIcon icon={['fal', 'code']} size="2x" /> <FontAwesomeIcon icon={['fal', 'code']} size="3x" /> <FontAwesomeIcon icon={['fal', 'code']} size="4x" /> <FontAwesomeIcon icon={['fal', 'code']} size="5x" /> <FontAwesomeIcon icon={['fal', 'code']} size="6x" /> 

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:

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" /> 

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 <ᴘvàgt; ở 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:

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} /> 

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:

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" /> 

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 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 :

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth /> <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth /> 

Biểu tượng quay

Spinning hữu hiệu để 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:

<FontAwesomeIcon icon={['fal', 'spinner']} spin /> 

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

<FontAwesomeIcon icon={['fal', 'code']} spin /> 

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 tiên 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ạ:

<FontAwesomeIcon   icon={['fab', 'javascript']}   mask={['fas', 'circle']}   transform="grow-7 left-1.5 up-2.2"   fixedWidth /> 

Chú ý 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 phương pháp để 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ó <ι class="fas fa-stroopwafel"></ivàgt; , 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 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 & suy xét các phối hợp khác nhau. Trong chỉ dẫn này, bạn đã tìm tòi 1 vài cách có thể sử dụng Font Awesome & React bên nhau.

Các tin liên quan