Sử dụng Font Awesome trên website WordPress như thế nào

Layout website WordPress nếu phải dùng icon thì trước đây thường dùng thẻ HTML <img tuy nhiên hiện nay có cách sử dụng hay hơn nhiều đó là sử dụng Symboy Font (font chữ kiểu ký hiệu) – và thường sử dụng nhất chính là Font Awesome.
Các bạn có để ý tới phần danh mục trên blog của mình.

Font awesome 12

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, Font Awesome 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, các 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 – các 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 mọi người 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à mọi người 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 mọi người 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, chúng ta 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 WordPress của mình.

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.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

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 Get Started 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.

Font awesome 1

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.

Font awesome 3

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.

Font awesome 4

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

Font awesome 6

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 Font Awesome.

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.

Nếu các bạn phải tìm hiểu Plugin của WordPress là gì thì hãy tìm đọc các bài viết hay do chúng tôi tổng hợp để hiểu rõ hơn.

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, các 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.

Font awesome 7

Để 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.

Font awesome 10

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 tổng kết

Trong hai cách để tích hợp Font Awesome Icon trong website WordPress. Riêng mình thì mình chọn phương pháp thủ công vì nó cũng khá đơn giản và dể làm. Thế còn các bạn? Nếu đang sử dụng Font Awesome cho website WordPress của mình thì sao? Bạn sẽ sử dụng plugin hay phương pháp thủ công để sử dụng font Font Awesome cho website của mình ?

Nguồn – thuthuatwp.com