Hướng dẫn cách thêm icon vào menu cho wordpress

Thanh menu luôn là điểm nhấn quan trọng trong mỗi trang web, đặc biệt là đối với các trang web bán hàng online cần sự tinh tế chi tiết thì menu càng cần chăm chút kỹ hơn, và thêm icon vào menu sẽ giúp trang web của bạn có được sự tinh tế đó. Đối với các trang web thiết kế bằng mã nguồn wordpress thì bạn hoàn toàn dễ dàng làm được điều đó. Bài viết này mình sẽ hướng dẫn cách thêm icon vào menu wordpress qua 2 cách rất dễ dàng và đơn giản.

2 cách thêm icon vào menu wordpress

1. Thêm icon vào menu wordpress bằng hình ảnh

Với cách này bạn sẽ thêm các icon vào menu thông qua việc upload hình ảnh lên, hình ảnh cần kích thước nhỏ và cân đối. Để làm được điều này đầu tiên bạn cần cài đặt plugin Menu Image.

Bạn chỉ cần cài đặt và kích hoạt mà không cần cấu hình gì thêm, sau khi kích hoạt tiến hành đưa hình ảnh vào menu.

cách thêm icon vào menu wordpress

Ở đây bạn sẽ thoải mái tùy chỉnh icon hình ảnh với kích thước mong muốn cũng như vị trí hiển thị icon như trên, dưới, phải, trái, chọn hình ảnh khi hover. Có thể nói rất linh hoạt.

Và đây là hình ảnh sau khi sử dụng plugin thêm icon bằng hình ảnh vào menu này

cách thêm icon vào menu wordpress

2. Thêm icon vào menu wordpress sử dụng font-awesome

Cách này thì không sử dụng hình ảnh mà sử dụng các icon code của font-awesome hỗ trợ, cũng rất linh hoạt bởi font-awesome có sẵn hàng trăm icon trong thư viện cho bạn lựa chọn.

Cách sử dụng như sau :

B1. Đầu tiên bạn cần nhúng thư viện font-awesome vào trang web bằng cách thêm đoạn code sau vào cặp thẻ <head></head>.

<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” integrity=”sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=”anonymous”>

B2: Vào thư viện font-awesome lấy icon bạn mong muốn. Đường link này : http://fontawesome.io/icons/

Ở đây có vô vàn các loại icon, bạn muốn lấy icon nào thì click vào icon đó sau đó copy code rồi vào menu dán trước label là xong.

thêm icon vào menu cho wordpress

Mình lấy ví dụ mình muốn thêm 1 icon là Home cho trang chủ thì click vào icon home và copy đoạn code như sau

thêm icon menu wordpress

Copy đoạn code icon này

thêm icon vào menu wordpress

Sau đó dán vào trước label (nhãn) của menu bạn cần

thêm icon vào menu wordpress

Và đây là kết quả mà mình nhận được sau khi thêm icon vào menu sử dụng font-awesome

thêm icon vào menu wordpress

Lời kết : Trên là 2 cách thêm icon vào menu wordpress thông dụng dễ sử dụng nhất mà mình từng thực hiện các dự án thiết kế web bằng wordpress, một website chuyên nghiệp chúng ta cần chỉnh chu từ những điều nhỏ nhất sẽ giúp khách hàng của mình hài lòng nhất.

Bài viết được xuất bản bởi dịch vụ http://blogloi.com/thiet-ke-website-wordpress-gia-re/

GỬI BÌNH LUẬN