Cách 1: Thêm font Awesome bằng cách upload lên hosting
Với cách thêm upload font Awesome lên hosting, bạn thực hiện theo các bước sau đây:
Bước 1: Tải về và giải nén Font Awesome
Đầu tiên bạn truy cập vào trang chủ của Font Awesome, kéo xuống phần Other Ways to Use và nhấn vào nút Download.
Tại giao diện mới xuất hiện, bạn sẽ thấy có 2 phiên bản là Pro và Free danh cho desktop và website. Bạn chọn phiên bản Free for web.
Sau khi tải xong, hãy giải nén file vừa tải về. Bạn sẽ tìm thấy hai thư mục quan trọng là css và webfonts.
Bước 2: Upload Font Awesome lên hosting
Truy cập vào hosting/VPS của bạn, trong thư mục theme của WordPress, bạn tạo một thư mục mới đặt tên là fontawesome. Sau đó upload 2 thư mục css và webfonts vừa giải nén vào thư mục này.
Tiếp theo, bạn mở file functions.php của theme và thêm đoạn code sau vào cuối file. Đoạn code này sẽ giúp WordPress gọi các file CSS của Font Awesome.
Bước 3: Tìm và sử dụng icon Font Awesome
Truy cập thư viện icon của Font Awesome, tìm icon mà bạn muốn sử dụng bằng cách gõ tên vào thanh tìm kiếm. Lưu ý, bạn cần gõ tên bằng tiếng anh.
Khi tìm thấy icon ưng ý, bạn nhấp chuột vào icon và sao chép đoạn code HTML được cung cấp.
Sau đó quay lại website WordPress và dán đoạn code bạn đã sao chép vào vị trí muốn hiển thị icon trong bài viết hoặc trang. Vì sử dụng code HTML nên bạn cũng cần chuyển trình soạn thảo về định dạng HTML.
Bước 4: Xem trước và chỉnh sửa
Sau khi chèn icon, bạn nên xem trước bài viết/trang để kiểm tra kết quả bằng cách nhấp vào Preview > Preview in new tab
Trong trường hợp không có gì cần thay đổi, bạn lưu lại bài viết/trang là xong. Ngược lại, nếu muốn thay đổi kích thước, màu sắc hoặc các thuộc tính khác của icon, bạn có thể tham khảo hướng dẫn chi tiết tại: https://docs.fontawesome.com/web/style/size.
Cách 2: Thêm font Awesome bằng plugin
Để tiết kiệm thời gian, công sức hoặc không muốn can thiệp vào code, bạn có thể sử dụng plugin để dễ dàng thêm font Awesome vào website WordPress. Trong đó, bạn nên sử dụng plugin Font Awesome chính thức từ nhà phát triển. Plugin này sẽ giúp bạn tự động cập nhật phiên bản Font Awesome mới nhất, đảm bảo các biểu tượng luôn được hiển thị đẹp mắt và đồng thời đảm bảo an toàn, bảo mật cho website. Các bước thêm font Awesome bằng plugin cụ thể như sau:
Bước 1: Cài đặt và kích hoạt plugin
Đầu tiên bạn truy cập website: https://fontawesome.com/start và đăng ký tài khoản mới bằng cách nhập email và nhấn vào nút Send Kit Embed Code.
Một email sẽ được gửi về email bạn vừa đăng ký, bạn kiểm tra và xác thực bằng cách chọn Confirm Your Email Address.
Bạn sẽ được chuyển đến giao diện mới và yêu cầu đặt mật khẩu cho tài khoản. Sau khi đặt xong, bạn bấm chọn Set Password & Continue.
Giao diện Quick set up for the web sẽ xuất hiện với một đoạn code javascript tương tự như hình bên dưới:
Bước 2: Kết nối với tài khoản Font Awesome
Tiếp theo, bạn truy cập vào tài khoản WordPress, vào mục Plugin và Install > Activate plugin Font Awesome.
Bạn tiếp tục truy cập vào mục Settings > Font Awesome và chọn liên kết Get your API token on fontawesome.com.
Bạn sẽ được chuyển đến giao diện trang fontawesome.com, hãy kéo xuống và tìm mục Tokens, sau đó click vào Generate.
Bạn copy mã token vừa hiển thị và quay lại website WordPress rồi dán vào ô API token > bấm Save API Token để lưu.
Nếu các thông tin hiển thị tương tự như hình bên dưới có nghĩa là bạn đã cài đặt thành công Font Awesome vào WordPress bằng plugin.
Bước 3: Thêm icon vào bài viết và trang
Sau khi kích hoạt, bạn sẽ thấy nút Font Awesome Icon trong thanh công cụ của trình chỉnh sửa bài viết (ở cả 2 phiên bản Block Editor và Classic Editor).
Khi nhấp vào nút này, một cửa sổ tìm kiếm icon sẽ hiện ra. Bạn nhập tên icon muốn tìm bằng tiếng anh và chọn icon phù hợp.
Plugin sẽ tự động tạo shortcode và chèn vào bài viết của bạn.