Kiến thức

Cách thêm Font Awesome vào WordPress

Cập nhật lần cuối: 22:44, 27 tháng 12, 2022

Bài trước Puramu đã hướng dẫn bạn cách chèn Font Awesome Icons vào Photoshop rồi. Hôm nay, chúng ta sẽ tìm hiểu thêm cách chèn icon trong Font Awesome vào WordPress sẽ như thế nào nhé!

Font Awesome là gì?

Font Awesome chứa thư viện font chữ ký hiệu (icon) được nhiều người ưa chuộng nhất hiện nay. Với hơn 19.000 icon đa dạng, phong phú phục vụ cho các designer, lập trình viên, người sáng tạo nội dung.

Font Awesome chứa nhiều định dạng file font khác nhau như: svg, otf, ttf, eot, woff… nên nó có thể hoạt động trơn tru trên hầu hết các hệ điều hành máy tính, các phần mềm và cả trang web. Thêm vào đó, Font Awesome cũng cho phép người dùng dễ dàng thay đổi kích thước và màu sắc của icon giúp quá trình sử dụng thuận tiện hơn.

Font Awesome
Font Awesome

Ưu điểm khi sử dụng Font Awesome

Thông thường, để sử dụng các icon, phải tìm kiếm hoặc thiết kế các hình ảnh dạng PNG hoặc SVG. Việc tìm kiếm này mất khá nhiều thời gian. Thêm vào đó, việc sử dụng quá nhiều icon dạng hình ảnh còn khiến tốc độ website chậm do tốn nhiều tài nguyên tải và lưu trữ.

Dùng icon dạng font chữ trong Font Awesome giúp bạn:

  • Tiết kiệm thời gian hơn.
  • Các icon trên website được đồng bộ về style, kiểu dáng hơn so với việc bạn tìm kiếm, lượm nhặt ở bên ngoài.
  • Có thể thay đổi màu sắc, kích thước thông qua các câu lệnh CSS.
  • Tương thích mọi thiết bị, trình duyệt: Các icon hiển thị tốt trên mọi màn hình, thiết bị hay bất kể các trình duyệt nào.
  • Các phiên bản được cập nhật thường xuyên.
  • Số lượng icon càng ngày càng tăng nên sẽ rất hiếm xảy ra việc bạn không tìm được icon bạn cần.
  • Miễn phí. Font Awesome có cả phiên bản pro mất phí nhưng theo Puramu thì bản Free đã đủ nhu cầu sử dụng rồi.

Hướng dẫn thêm Font Awesome vào WordPress

Cách 1: Thêm Font Awesome vào WordPress bằng cách upload lên hosting

Bước 1: Tải Font Awesome

Đầu tiên, bạn cần tải Font Awesome Free về máy:

  • Truy cập trang web Font Awesome, sau đó lướt xuống bạn sẽ thấy mục Download (như trong hình). Nhấp vào Download để tải về máy.
Tải Font Awesome về máy
Tải Font Awesome về máy

Nhấp vào download sẽ hiện ra một loạt các phiên bản của Font Awesome bản Pro và Free trên Desktop và Web. Trong hướng dẫn này chúng ta sẽ sử dụng Font Awesome trong WordPress nên Puramu chọn tải bản Free trên Web. Tại thời điểm viết bài này phiên bản mới nhất của Font Awesome là 6.2.1.

Font Awesome 6 là phiên bản mới nhất tại thời điểm Puramu viết bài
Font Awesome 6 là phiên bản mới nhất tại thời điểm Puramu viết bài
  • Sau khi tải về máy bạn giải nén tệp đã tải xuống trên ổ cứng. Bạn sẽ thấy các thư mục như hình dưới. Chúng ta chỉ quan tâm hai thư mục tô đậm bên dưới là css webfonts.
Thư mục Font Awesome sau khi giải nén
Thư mục Font Awesome sau khi giải nén

Bước 2: Thêm Font Awesome vào WordPress

Khi đã tải và giải nén Font Awesome xong thì chúng ta tải nó lên hosting để sử dụng:

Truy cập vào VPS hay Hosting của bạn, vào thư mục theme mà bạn đang sử dụng, tạo cho mình thư mục có tên là fontawesome. Sau đó, tải 2 thư mục bên trên vào thư mục vừa tạo.

Sau đó sao chép đoạn code bên dưới dán vào file functions.php trong thư mục theme mà bạn đang sử dụng để gọi Font Awesome đã chứa sẵn trên Hosting, rồi lưu lại là xong.

<?php 
// Thêm Font Awesome 6.2.1 vào theme
function puramu_load_fa() {
	wp_enqueue_style( 'puramu-fa', get_stylesheet_directory_uri() . '/fontawesome/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'puramu_load_fa' );

Bước 3: Tìm icon trong Font Awesome Free

Truy cập vào Thư viện Icons trong Font Awesome, nhấp vào thanh tìm kiếm để gõ tên icon cần sử dụng. Lưu ý là bạn phải nhập tên icon bằng tiếng anh nhé. Ví dụ trong hình là Puramu đang tìm icon Car (xe hơi).

Icon xe hơi trong Font Awesome
Icon xe hơi trong Font Awesome

Nếu bạn chưa xác định được icon nào mình cần, bạn có thể lướt xuống và khám phá các icon trong thư viện Font Awesome.

Sau khi đã chọn được icon yêu thích, bạn nhấp chuột vào icon, một cửa sổ nhỏ mới sẽ được bật lên. Bạn bôi đen phần code html như hình dưới, icon sẽ tự động được sao chép.

Sao chép html của icon trong Font Awesome
Sao chép html của icon trong Font Awesome

Bước 4: Thêm icon Font Awesome vào bài viết và trang

Dán mã HTML trên vào vị trí mà bạn muốn đặt trên website.

Chèn icon Font Awesome vào WordPress bằng trình chỉnh sửa HTML
Chèn icon Font Awesome vào WordPress bằng trình chỉnh sửa HTML

Trong bài viết, nếu bạn muốn sử dụng đoạn mã HTML này, thì cần chuyển trình soạn thảo qua dạng xem HTML rồi dán vào.

Sau đó nhấp chuột vào Preview -> Preview in new tab để xem trước bài viết đã hiển thị đúng như bạn mong muốn chưa, cần chỉnh sửa kích thước, màu sắc gì không. Khi đã ưng ý rồi, bạn lưu lại là xong.

Kết quả hiển thị sau khi thêm icon Font Awesome vào WordPress
Kết quả hiển thị sau khi thêm icon Font Awesome vào WordPress

Để thay đổi màu sắc và kích thước icon, thì bạn sử dụng thẻ style với các thông số color, font-size, như việc thiết lập cho các font chữ khác (xem hướng dẫn tại https://fontawesome.com/v6/docs/web/style/size).

Cách 2: Thêm Font Awesome vào WordPress bằng Plugin

Nếu bạn ngại đụng đến code thì cách này sẽ nhanh, gọn, phù hợp với bạn. chèn Font Awesome vào WordPress dễ dàng, hỗ trợ cả shortcode nữa để bạn có thể chèn vào trong bài viết một cách dễ dàng, tự động sử dụng phiên bản mới nhất của Font Awesome.

Hiện nay có rất nhiều plugin để sử dụng Font Awesome. Nhưng Puramu sẽ chọn và hướng dẫn bạn về plugin Font Awesome thôi. Vì đây plugin chính thức do Font Awesome phát triển nên đảm bảo tính bảo mật, cập nhật dài lâu, an toàn cho website của chúng ta nhất có thể.

Bước 1: Cài đặt và kích hoạt plugin

Bước này khá đơn giản. Nếu bạn chưa biết cách cài Plugin WordPress thì tham khảo bài này nhé!

Bước 2: Thêm icon Font Awesome vào bài viết và trang

Sau khi kích hoạt plugin, vào trình chỉnh sửa bài viết hoặc trang bất kì bạn sẽ thấy nút Font Awesome Icon trên thanh công cụ (bao gồm cả Block Editor và Classic Editor).

Công cụ Font Awesome trong WordPress Block Editor
Công cụ Font Awesome trong WordPress Block Editor

Nhấp vào nút Font Awesome Icon, một ô tìm kiếm icon sẽ hiện lên. Nhập tên icon bạn muốn sử dụng trên thanh tìm kiếm (lưu ý phải sử dụng tiếng anh nhé).

Ô tìm kiếm Font Awesome WordPress Block Editor
Ô tìm kiếm Font Awesome WordPress Block Editor

Nhấp vào icon bạn ưng ý, shortcode sẽ tự động sinh ra và chèn vào vị trí con trỏ trong WordPress Editor. 

Shortcode được tạo ra sau khi thao tác
Shortcode được tạo ra sau khi thao tác

Ngoài ra bạn cũng có thể chèn icon từ Font Awesome vào bất cứ đâu trên website như menu, footer,.. bằng cách tìm kiếm tên icon và sử dụng shortcode mà plugin Font Awesome cung cấp.

[icon name="car"]
[icon name="car" prefix="fal"]

Không những thế bạn vẫn có thể chèn bằng HTML như trong hướng dẫn tại bước 3 & 4 của cách 1 ở trên.

Trên đây là hai cách thêm Font Awesome vào WordPress đơn giản, hiệu quả, hạn chế rủi ro cho website bạn nhất. Chúc bạn thành công!