Cài Font Awesome vào Flatsome Theme

Awesome Font vẫn là Icon Font tốt nhất hiện nay, chỉ cần dùng 2 từ ĐỦ và ĐẸP để đánh giá về Font này. Phiên bản mới nhất là Font Awesome 6 với 7,842 Icons, chia làm 4 kiểu Icon (solid, regular, light và duotone). Bản Free có hạn chế là chỉ có kiểu font Solid, trong khi Font Awesome 6 Pro đầy đủ với nhiều font mảnh đẹp và rất chuyên nghiệp. Giá bản Font Awesome 6 Pro hiện là $79/ năm đầu tiên.

Thôi giới thiệu qua vậy, còn giờ đi vào vấn đề chính, các cách thêm Font Awesome vào Flatsome Theme nói riêng và bất cứ Theme nào của WordPress nói chung. Và nếu bạn cần tải theme Flatsome “xịn xò nhất” thì xem bài này: tải flatsome mới nhất (bản sạch tải từ Themeforest)

1. Thêm Font Awesome vào Flatsome Theme bằng Plugin

Đầu tiên bạn cần cài đặt và kích hoạt plugin Font Awesome (đây là plugin chính chủ do Font Awesome phát triển nhé).

Thêm Icon Font vào trình soạn thảo hay bất cứ đâu trên website của bạn với Shortcode kiểu này

Kết quả bạn nhận được:

Cũng như Font chữ thông thường bạn hoàn toàn có thể tăng giảm kích thước Font Awesome bình thường nhé.

2. Thêm Font Awesome vào FlatsomeTheme bằng mã nhúng CDN

Phương pháp này sử dụng Font Awesome có sẵn trên máy chủ CDN của Awesome, bạn chỉ cần link gọi đến Font đó là sử dụng được. Có 2 phương pháp tích hợp Font Awesome vào Flatsome bằng mã nhúng này

Cách 1: Copy và dán mã nhúng CDN vào trước thẻ </header> của file header.php của Theme bạn sử dụng.

Phương pháp thủ công này khá dễ dàng. Trước tiên, bạn cần truy cập trang web Font Awesome và nhập địa chỉ email của bạn để lấy mã nhúng.

Bây giờ hãy kiểm tra hộp thư đến của bạn để nhận email từ Font Awesome với mã nhúng của bạn. Sao chép và dán mã nhúng này vào tệp header.php của Theme WordPress của bạn ngay trước thẻ </head>.

Mã nhúng của bạn sẽ là một dòng duy nhất sẽ tìm nạp thư viện Font Awesome trực tiếp từ các máy chủ CDN của họ. Nó sẽ trông giống như thế này:

Phương pháp này đơn giản nhất, nhưng nó có thể gây ra xung đột với các plugin khác. Nên tôi khuyến nghị bạn nên chọn cách tích hợp tốt hơn sẽ là tải JavaScript đúng cách trong WordPress bằng cách sử dụng cơ chế enqueue.

Cách 2: Nhúng đoạn mã Font Awesome CDN vào Functions.php với lệnh enqueue

Thay vì nhúng đoạn mã CDN vào file Header thì bạn có thể thêm đoạn mã sau vào của file functions.php. (link CDN vẫn là link được gửi tới email của bạn).

3 Tải Font Awesome upload lên hosting website

Cách này có ưu điểm là Font Awesome nằm trên hosting website của bạn, sẽ không có sự chậm chễ cho website khi đứt cáp hay vấn đề gì khi tải từ CDN. Đây là cách tôi yêu thích nhất.

Trước tiên, bạn cần truy cập trang web Font Awesome để tải gói phông chữ về nhé. Mình thì vẫn thích dùng bản Font Awesome Pro hơn vì nó có quá nhiều icon đẹp, chia sẻ luôn với các bạn link download Font Awesome 5 Pro 5.15.2

Chú ý: bạn hãy tải bản Font Awesome Free For The Web (vì nó còn có cả bản cho Desktop nữa). Hiện bản mới nhất là fontawesome-free-5.14.0-web.zip

Sau đó giải nén và upload vào thư mục flatsome-child/fontawesome-free-5.14.0-web

Thêm đoạn mã dưới đây vào file functions.php trong Flatsome Child để gọi Font Awesome đã chứa sẵn trên Hosting

4 Cách hiển thị Font Awesome

Bạn tới trang Font Awesome’s website để xem danh sách đầy đủ các biểu tượng có sẵn. Nhấp vào bất kỳ biểu tượng nào bạn muốn sử dụng và sao chép đoạn mã như ví dụ dưới đây vào trang của bạn.

Ngoài ra bạn có thể thêm font vào bằng CSS với đoạn code dạng:

Chú ý: khi thêm Font Awesome bằng CSS bạn nhớ thêm thuộc tính font-weight: 700; vì bạn đang sử dụng Font Awesome 5 Free chỉ hỗ trợ kiểu font Solid

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm phông chữ biểu tượng trong chủ đề WordPress của bạn. Nếu bạn cần trợ giúp có thể comment bên dưới để chúng tôi sớm hỗ trợ bạn. Chúc bạn thành công.

Nguồn: https://daivietweb.com/tich-hop-font-awesome-vao-flatsome-theme/