Hướng dẫn cách cài Font Awesome vào WordPress để sử dụng icon

Trong thiết kế website, thì các biểu tượng icon là một trong những thứ cực kỳ cần thiết, nó giúp cho website trở nên sinh động và lý thú với người dùng, đọc giả hơn. Đôi khi bạn chỉ cần đưa icon vào một vài chức năng thay cho text, thì người sử dụng cũng hiểu rỏ chức năng đó là gì.

Để sử dụng các icon, thì người thiết kế website thường phải tìm kiếm hoặc thiết kế các hình ảnh dạng PNG hoặc SVG. Tuy nhiên việc tìm kiếm và đồng bộ là cực kỳ mệt mỏi nếu sử dụng dạng icon hình ảnh này, không kể đến là các dạng hình ảnh này là dạng file ảnh không nén, khiến cho website của bạn sẻ phải tốn thêm tài nguyên để tải. Thì may mắn thay, công nghệ phát triển thì kéo theo đó là các dạng font chữ cũng phát triển theo, và người ta đã làm và thay thế các biểu tượng trên website bằng các font chữ biểu tượng, từ đây người dùng có thể tìm kiếm icon được nhanh và động bộ hơn, quan trọng nhất là các icon có thể thay đổi màu sắc thông qua các câu lệnh css thông thường.

Trong bài viết này Tam Nguyên sẽ hướng dẫn bạn 2 cách để cài font Awesome vào WordPress

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,… Vì thế, 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.

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.

Nhấp vào download. Bạn sẽ thấy 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.6.0

• 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 và webfonts.

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.

Tiếp đó, 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. Mục đích là để gọi Font Awesome đã chứa sẵn trên Hosting. Bạn lưu lại là xong.

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

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

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à Tam Nguyên đang tìm icon building (toà nhà).

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.

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.

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.

Để 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. Plugin cho phép chèn Font Awesome vào WordPress dễ dàng, hỗ trợ cả shortcode nữa. Vì thế, bạn có thể chèn icon vào trong bài viết nhanh chóng. Plugin còn tự động sử dụng phiên bản mới nhất của Font Awesome đảm bảo icon luôn được cập nhật liên tục.

Hiện nay có rất nhiều plugin để sử dụng Font Awesome. Trong bài viết này Tam Nguyên sẽ hướng dẫn bạn về plugin Font Awesome. 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

Vào menu Plugin > Cài Plugin, tại đây bạn tìm kiếm Font Awesome và tiến hành cài đặt

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

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é).

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.

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.

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.

Như vậy là vừa rồi Tam Nguyên đã hướng dẫn bạn 2 cách để chèn font chữ vào website sử dụng WordPress, hy vọng bạn sẽ làm được và chia sẻ bài viết này lên facebook để nhiều người biết đến hơn.

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