Hướng Dẫn Chi Tiết Cách Thêm Icon Vào Menu Của WordPress

WordPress

Việc thêm icon vào menu của WordPress không chỉ giúp trang web của bạn trở nên trực quan và hấp dẫn hơn, mà còn cải thiện trải nghiệm người dùng bằng cách làm cho các mục menu dễ nhận diện hơn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm icon vào menu của WordPress qua ba phương pháp đơn giản: sử dụng plugin, thêm thủ công bằng mã CSS, và sử dụng Font Awesome.

1. Sử Dụng Plugin Menu Icons

Menu Icons là một trong những plugin phổ biến nhất để thêm icon vào menu của WordPress mà không cần phải chỉnh sửa mã code. Đây là cách bạn có thể sử dụng nó:

Bước 1: Cài đặt và kích hoạt plugin Menu Icons.

Truy cập vào Dashboard của WordPress.

Vào “Plugins” -> “Add New”.

Tìm kiếm “Menu Icons” và nhấp vào “Install Now”, sau đó chọn “Activate”.

Bước 2: Thêm icon vào menu.

Vào “Appearance” -> “Menus”.

Chọn menu mà bạn muốn thêm icon.

Nhấp vào mục menu mà bạn muốn thêm icon, sẽ xuất hiện tùy chọn “Menu Icons”.

Nhấp vào “Select Icon” và chọn icon mong muốn từ danh sách có sẵn.

Lưu lại thay đổi bằng cách nhấn “Save Menu”.

2. Thêm Icon Thủ Công Bằng Mã CSS

Nếu bạn muốn có sự tùy chỉnh linh hoạt hơn, bạn có thể thêm icon vào menu bằng cách sử dụng mã CSS. Phương pháp này yêu cầu bạn có một chút kiến thức về CSS.

Bước 1: Xác định vị trí của menu.

Vào “Appearance” -> “Menus”.

Tìm ID hoặc class của mục menu mà bạn muốn thêm icon.

Bước 2: Thêm mã CSS.

Truy cập “Appearance” -> “Customize” -> “Additional CSS”.

Thêm đoạn mã sau:

#menu-item-id a {
    position: relative;
    padding-left: 25px;
}

#menu-item-id a:before {
    content: "\f015"; /* Thay thế với mã icon từ Font Awesome hoặc mã Unicode khác */
    font-family: "Font Awesome 5 Free"; /* Font Awesome version */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Lưu lại thay đổi và kiểm tra trên trang web của bạn.

Chú ý: Mã Unicode \f015 chỉ là một ví dụ, bạn có thể thay thế bằng bất kỳ mã icon nào bạn muốn sử dụng.

3. Sử Dụng Font Awesome

Font Awesome là một thư viện icon phổ biến, bạn có thể tích hợp dễ dàng vào WordPress để thêm icon vào menu.

Bước 1: Tích hợp Font Awesome vào trang web.

Bạn có thể thêm Font Awesome thông qua plugin hoặc chèn mã CDN vào thẻ <head> của theme. Một trong những plugin phổ biến là Better Font Awesome.

Bước 2: Thêm icon vào menu.

Vào “Appearance” -> “Menus”.

Trong phần Label của mục menu, thêm tên class của icon từ Font Awesome. Ví dụ, thêm đoạn mã sau:

<i class="fas fa-home"></i> Home

Lưu lại menu và kiểm tra trên trang web của bạn.

Kết Luận

Thêm icon vào menu của WordPress là một cách tuyệt vời để làm cho trang web của bạn nổi bật và thân thiện hơn với người dùng. Bạn có thể lựa chọn giữa sử dụng plugin để dễ dàng hơn, hoặc tùy chỉnh sâu hơn với CSS và Font Awesome nếu bạn có chút kinh nghiệm về mã code. Dù bạn chọn phương pháp nào, việc thêm icon chắc chắn sẽ mang lại trải nghiệm tốt hơn cho người dùng truy cập vào trang web của bạn.

Kết nối với web designer Lê Thành Nam

Chia Sẻ Bài Viết