2 cách hiển thị icon trên menu trong website WordPress

2 cách hiển thị icon trên menu trong website WordPress

Việc sử dụng hình ảnh để bổ trợ, thậm chí là thay thế luôn cho các nội dung chữ đã không còn quá xa lạ với chúng ta. Hình ảnh còn được khuyến khích sử dụng nhiều hơn là chữ vì mang ý nghĩa biểu đạt và thẩm mỹ cao hơn so với chữ thông thường.

Vì vậy, có thể bạn sẽ thấy một menu website toàn chữ sẽ thiếu đi tính hấp dẫn và kích thích người dùng. Hoặc phần chữ quá dài dòng khiến bạn muốn thay thế bằng một vài hình ảnh minh hoạ ngắn gọn hơn. Cách phổ biến nhất để thực hiện việc đó là bạn sử dụng các icon cho các mục trên menu của mình.

Trong bài viết này mình sẽ hướng dẫn các bạn hiển thị các icon lên menu trên website WordPress. Hãy cùng theo dõi nhé.

Cách 1: Dùng CSS để thêm icon

Trước tiên, mình cần phải nói sơ qua đó là icon có rất nhiều loại, được thiết kế và phát triển bởi rất nhiều bên. Mỗi bên sẽ có một thư viện icon riêng như Dashicons, FontAwesome, Elusive, và Genericons. Cùng là một hình như icon của các thư viện khác nhau sẽ có CSS khác nhau. Vì vậy bạn nên chọn 1 thư viện nhất định, và thống nhất chỉ sử dụng bộ icon của 1 thư viện đã chọn, đừng dùng lẫn lộn các thư viện với nhau nhé.

Với mình, mình thấy Dashicons là thư viện của WordPress tạo ra, nên mặc định các theme đều có tích hợp sẵn rồi nên mình không cần phải kích hoạt thư viện icon này trên website của mình nữa. Vì vậy, thao tác đơn giản hơn nên mình chọn Dashicons.

Nếu các bạn chọn các thư viện khác, thì bạn cần phải kích hoạt thư viện icon cho theme, bằng cách vào file functions.php để thêm code kích hoạt.

Bước 1: Thêm CSS của icon cho từng mục trên menu

Bây giờ, bạn hãy đến trang thư viện của Dashicons và tìm icon bạn muốn đặt cho chuyên mục bạn cần, sau đó sao chép mã HTML của icon đó.

Thêm CSS của icon cho từng mục trên menu

Như ở đây, icon của mình có đoạn mã HTML là <span class="dashicons dashicons-heart"></span>.

Quay trở lại giao diện admin trên website của bạn, bạn vào phần Appearance > Menus để tạo hoặc chỉnh sửa menu bạn muốn.

Bạn chọn menu mà tên mục bạn muốn thêm icon. Ở ô Navigation Label của mục đầu tiên trong menu của mình đang có tên là Home. Bây giờ, mình sẽ dán đoạn mã trên vào ngay trước chữ Home như sau:

hỉnh sửa menu bằng cách dán mã code

Ngay sau khi lưu thay đổi lại, ra ngoài trang chủ website của mình, sẽ thấy icon hiển thị ngay bên cạnh chữ Home.

Hiển thị icon ngay bên cạnh chữ Home

Vị trí và kích thước của icon có thể sẽ chưa được cân đối với giao diện website của bạn, nên bạn cũng cần chỉnh sửa các icon này một chút như ở bước sau đây.

Bước 2: Dùng CSS để style lại cho các icon

Vẫn ở trang chủ website, bạn click vào nút Tuỳ biến (Customize) để mở Customizer lên. Hoặc bạn cũng có thể mở Customizer từ trong admin bằng cách đến menu Appearance > Customize.

Dùng CSS để style lại cho các icon

Trong giao diện của Customizer, bạn chọn tab Additional CSS ở bên trái.

tab Additional CSS

Thêm đoạn code sau vào ô trống góc bên dưới:

.main-navigation li a {
    display:flex;
    align-items: center;
}
.main-navigation li span {
    margin-right: 8px;
}

điều chỉnh lại vị trí và kích thước của icon

Bạn sẽ thấy icon trên menu hiển thị cân đối hơn. Bạn cũng có thể dùng thêm code CSS khác vào thêm cùng vào vị trí này để điều chỉnh lại vị trí và kích thước của icon.

Cuối cùng, bạn nhấn nút Publish để lưu lại kết quả.

Kết quả sau khi hoàn thành việc hiển thị icon

Kết quả sau khi hoàn thành việc thêm icon

Như vậy, bạn đã hoàn thành việc thêm icon vào menu bằng CSS rồi đó. Nhưng nếu bạn không rành về CSS để style cho icon, thì có một cách khác đơn giản hơn nhiều, đó là dùng plugin. Cùng thử nhé.

Cách 2: Thêm icon vào menu bằng plugin

Có khá nhiều plugin giúp bạn thêm icon, và cả ảnh nữa cho các mục trong menu WordPress của bạn. Trong số đó thì plugin Menu Icons by ThemeIsle là có số lượt download nhiều nhất. Plugin này miễn phí và bạn có thể cài đặt và kích hoạt nó trực tiếp trong dashboard nhé.

Thêm icon vào menu bằng plugin

Ngay sau khi kích hoạt plugin này, bạn quay trở lại trang chỉnh sửa menu ở mục Appearance > Menus sẽ thấy xuất hiện thêm một dòng chữ mới là Icon: Select.

Hiển thị mục icon: select

Nhấn vào chữ Select, một popup sẽ xuất hiện, cho phép bạn chọn các icon bạn muốn, chỉnh sửa các thông số như kích thước, vị trí, ẩn tên menu đi hay không, và xem preview.

chỉnh sửa các thông số

Sau khi chọn và chỉnh sửa xong, bạn nhấn Select và lưu menu lại. Lúc này, icon bạn chọn sẽ hiển thị trên menu khá đẹp mắt.

hiển thị menu

Lời cuối

Bạn thấy đấy, mình vẫn để cả icon của mục Home theo cách làm thứ 1, và icon được tạo với plugin. Vì plugin Menu Icons by ThemeIsle cũng sử dụng thư viện icon của Dashicons, nên các icon vẫn hiển thị tốt. Bạn chỉ cần dùng thống nhất một thư viện icon thì sẽ không bị lỗi nhé.

Rất hy vọng bài viết này có thể giúp bạn làm đẹp cho menu trên website của bạn hơn một chút. Nhớ theo dõi thêm các bài hướng dẫn sau của mình nhé.

Gửi phản hồi