Cách sử dụng Font Awesome (icon) trên website WordPress

Bạn có để ý tới phần danh mục trên blog như hình dưới.

Nó có những icon trông khá bắt mắt, phải không?

Vậy, những icon này là gì?

Những icon này không phải là hình ảnh hay do plugin tạo ra. Chúng chính là font icon.

Khi nói về font icon, FontAwesome là bộ font icon phổ biến nhất trên mạng hiện giờ.

Ở thời điểm bài viết này Font Awesome đang ở phiên bản 4.7. Phiên bản này hiện có trên 600 icons. Do vậy, bạn dễ dàng chọn ra được icon phù hợp nhu cầu cá nhân

Sử dụng Font Awesome có một vài lợi ích:

· Vector - nghĩa là chúng sẽ hiển thị rất tốt bất kể độ phân giải màn hình đang sử dụng

· Tùy biến - bạn có thể tùy biến icon theo sở thích cá nhân như màu sắc, hoạt hình

· Tương thích nhiều loại trình duyệt - font icon sẽ hiển thị tốt trên các trình duyệt phổ biến hiện nay

· Chúng được cập nhật thường xuyên đem đến trải nghiệm người dùng tốt nhất.

Quan trọng nhất bạn sử dụng chúng miễn phí.

Bây giờ mình sẽ hướng dẫn bạn cách đưa Font Awesome vào website của bạn.

Nhưng có một điểm cần lưu ý:

Font Awesome phổ biến đến mức mà nhiều nhà phát triển theme đã tích hợp sẵn bộ font icon này. Nghĩa là bạn không cần cài đặt và có thể sử dụng luôn các icon trên website của Font Awesome nếu muốn.

Do vậy đầu tiên bạn cần kiểm tra xem theme của mình đã tích hợp chưa. Bạn chỉ cần xem lại tài liệu của theme nếu không chắc.

Về cách sử dụng Font Awesome, bạn sẽ có 2 lựa chọn. Thứ nhất sử dụng thủ công. Hai là cài đặt plugin hỗ trợ bổ sung Font Awesome vào website của bạn.

Cách bổ sung Font Awesome thủ công

Để sử dụng Font Awesome Icon bạn cần đặt Font Awesome vào website của bạn. Đơn giản bổ sung đoạn code sau vào file header.php. Nhớ tạo child theme trước khi tiến hành thêm code.

Bạn có thể thay đổi là số phiên bản để sử dụng phiên bản Font Awesome mới nhất.

Một cách khác:

Bạn có thể lấy code này ở trang GetStarted của Font Awesome. Ở đây bạn cần nhập vào địa chỉ email. Font Awesome sẽ gửi code cài đặt vào email của bạn.

Bây giờ bạn đã cài đặt Font Awesome vào website của bạn. Tiếp theo bạn chỉ cần chọn icon bạn muốn sử dụng trên website của bạn.

Đi tới trang danh sách icon trên website của Font Awesome. Bạn gõ tên hoặc thủ công duyệt qua danh sách icon.

Ngay sau khi tìm được icon ưng ý. Click vào nó. Bạn sẽ được đưa tới trang chứa code bạn cần bổ sung vào website.

Copy code và dán vào bất cứ nơi nào bạn muốn hiển thị icon. Lưu ý nếu bạn sử dụng WordPress editor bạn cần chuyển sang tab text để chèn code. Vì code này là mã HTML.

Chuyển sang front-end kiểm tra xem font icon bạn chọn hiển thị ra sao:

Bạn cần tùy biến lại icon chẳng hạn như tăng kích thước, tham khảo hướng dẫn đầy đủ trên website của FontAwesome.

Cách bổ sung Font Awesome sử dụng plugin

Nếu bạn thấy quá trình cài đặt Font Awesome thủ công không thuận tiện, hơi lằng nhằng. Hoặc bạn hơi ngại thêm code vào file header.php.

Bạn có thể chọn một plugin giúp bạn tự động bổ sung thêm Font Awesome vào website. Có nhiều plugin như vậy để bạn chọn lựa.

Plugin Better Font Awesome là plugin phổ biến nhất.

Sử dụng plugin này bạn sẽ có nhiều tiện lợi hơn so với cách sử dụng thủ công:

Thứ nhất, bạn sẽ tự động sử dụng phiên bản mới nhất của Font Awesome

Thứ hai, ngoài cách chèn code HTML thủ công như trên bạn có thể chèn icon bằng viecj sử dụng shortcode. Plugin thậm chí có tính năng sinh shortcode trong WordPress Editor.

Đầu tiên bạn cài đặt và kích hoạt plugin.

Ngay khi kích hoạt plugin, bạn có thể đi tới phần cấu hình plugin Setting -> Better Font Awesome. Thực tế bạn có thể sử dụng Font Awesome luôn được rồi. Bạn không cần phải thực hiện thêm bất kỳ cấu hình nào.

Để kiểm tra khả năng sinh shortcode, bạn đi tới WordPress Editor. Ở đây bạn sẽ nhìn thấy một icon mới có tên insert Icon.

Click vào nút Insert Icon. Bạn sẽ nhìn thấy ô tìm kiếm icon. Nhập vào tên icon bạn muốn. Và click vào icon ở kết quả trả về.

Shortcode sẽ tự động sinh ra và chèn vào vị trí con trỏ trong WordPress Editor.

Lời kết

Đó là tất cả!

Bạn biết hai cách để sử dụng Font Awesome Icon trong website của bạn. Cá nhân mình chọn phương thức thủ công.

Thực lòng mà nói nó không lằng nhằng lắm.

Nguồn: thuthuatwp