Cách sử dụng và nhúng font awesome vào website như thế nào?

Font Awesome là một trong các kiểu thư viện tạo icon rất đẹp và nhẹ trên website, cho phép bạn tùy biến - custom màu của icon theo màu của thương hiệu, kích thước size to nhỏ của icon.

1. Font Awesome là gì?

    
Như đã giải thích bên trên Font Awesome là một trong các kiểu thư viện tạo icon rất đẹp và nhẹ(Nhẹ ở đây là nếu so sánh các font icon với việc bạn phải thiết kế các icon đó là kiểu hình ảnh).
  • Font Awesome ra đời ngày 3 Mar 2012 với phiên bản - version 1.0.0
  • Ở thời điểm hiện tại khi mình đang viết bài hướng dẫn tháng 11 năm 2022, thì Font Awesome đã phát triển tới version 6.2.0 rồi

1.1. Tại sao lại phải sử dụng Font Awesome.

    Có rất nhiều lý do cho mỗi đối tượng sử dụng với mục đích khác nhau, riêng trong lĩnh vực lập trình và thiết kế website thì Font Awesome là một thư viện thực sự cần thiết.
    Tạo sao Font Awesome lại cần thiết?
  • Chúng tao ra một thư viện icon rất đẹp (Ngay cả với phiên bản miễn phí - Free).
  • Cho phép bạn có thể chỉnh sửa custom màu sắc, kích thước - size cho phù hợp và nhất quan với thương hiệu - brand của bạn trên website.
  • Giản chi phí & thời gian trong quá trình thiết kế các kiểu biểu ngữ - icon và phát triển website.

2. Cách sử dụng Font Awesome

Hướng dẫn sử dụng Font Awesome

2.1 Nhúng vào Website

- Để sử dụng và nhúng Font Awesome vào website bạn phải download thư viện Font Awesome về sử dụng.
- Hoặc bạn có thể sử dụng đường link CDN của Font Awesome

2.1.1 Download Font Awesome bản miễn phí - Free

Bạn vào website https://fontawesome.com, kéo thanh cuộn xuống dưới cùng của trang web. Sau đó nhấp chuột vào link liên kết "All Version" như hình bên dưới hoặc vào link liên kết: https://fontawesome.com/versions

- Chọn phiên bản version 5.15.4 (Đến thời điểm hiện tại là tháng Nov 2022 mình thấy version 5.15.4 chạy là ổn định nhất) để download - tải về.
Panpic hướng dẫn sử dụng Font Awesome
Panpic hướng dẫn sử dụng Font Awesome - ảnh PANPIC

- Chọn bản Free For Web hoặc vào trực tiếp link Free như hình bên dưới download version 5.15.4 như hình sau:
Panpic hướng dẫn sử dụng Font Awesome
Panpic hướng dẫn sử dụng Font Awesome - ảnh minh họa

- Giải nén
Panpic hướng dẫn sử dụng Font Awesome
Sau khi download về máy tính, giải nén file thư viện - ảnh PANPIC

- Upload tất cả các file & folder lên server website của bạn. Hoặc nếu đang test ở máy tính local thì copy vào thư mục website.
- Ví dụ: Server của tôi là website Panpic.vn tôi tạo folder ./fontawesome/ Sau đó upload toàn bộ file source code Font Awesome vào thư mục vừa tạo.
 

Upload thư viện Font Awesome lên server website
Upload thư viện Font Awesome lên server website - ảnh PANPIC

2.1.2 Nhúng thư viện vào website của bạn

- Bạn mở mà nguồn source code của website chèn link nhúng thư viện CSS của Font Awesome vào website bên trong vị trí của cặp thẻ head như hình minh họa:
Panpic hướng dẫn sử dụng Font Awesome
Nhúng thư viện vào website - ảnh PANPIC

< head >
< link href="https://panpic.vn/fontawesome/css/all.css" rel="stylesheet" >
< /head >
// Lưu ý. Bạn viết liền các ký tự liền sau dấu <

 

2.1.3 Sử dụng icon Font Awesome

- Vào website Font Awesome tìm kiếm các icon Free: https://fontawesome.com/v5/search?q=phone&o=r&m=free
-  Lưu ý: Bạn chọn version / Chọn biểu tượng Free / Nhập tên icon cần tìm.
Ví dụ: Tìm icon điện thoại, thì nhập chữ phone như hình sau: 

FontAwesome Nhấp phải chuột vào biểu tượng icon cần lấy



- Nhấp phải chuột vào biểu tượng icon cần lấy / Copy class vào vị trí bạn muốn icon hiển thị trên website của bạn:

< i class=" fas fa-phone fa-fw "> < /i >

Xem thêm hình bên dưới:

PANPIC hướng dẫn sử dụng Font Awesome
Copy tên class của icon Font Awesome - ảnh minh họa

2.1.4 Tham khảo thêm các thuộc tính icon của Font Awesome

  • Màu sắc
  • Kích thước - Size của icon
  • Hiệu ứng
  • ...vv

Ví dụ: Kích thước size icon
< i class="fas fa-camera fa-xs" >
< i class="fas fa-camera fa-sm" >
< i class="fas fa-camera fa-lg" >
< i class="fas fa-camera fa-2x" >
< i class="fas fa-camera fa-3x" >
< i class="fas fa-camera fa-5x" >
< i class="fas fa-camera fa-7x" >
< i class="fas fa-camera fa-10x ">
Xem thêm tại link: https://fontawesome.com/v5/docs/web/style/size

3. Chọn một số icon nhất định 

    Font Awesome là một thư viện lớn, đối với một website doanh nghiệp
    đôi khi không sử dụng hết tất cả thư viên của Font Awesome, các bạn có thể gom một số kiểu icon cần dùng 
    vào file style.css hoặc main.css khi lập trình giao diện font-end.

Chúc các bạn thành công

Tin liên quan