Thêm icon vào menu wordpress theme flatsome với plugin Menu Icons

Themelsle

Hướng dẫn thêm icon vào menu của wordpress không cần biết code.

Bạn muốn thêm icon vào menu để website wordpress của bạn trở nên chuyên nghiệp hơn, sống động hơn, chuyên nghiệp hơn. Có rất nhiều cách để thêm icon vào menu wp, nhưng ở bài viết này, mình sẽ chỉ các bạn cách đơn giản nhất, dễ làm nhất, và được sử dụng nhiều nhất. Đó là cài đặt plugin Menu Icons by ThemeIsle.

Với plugin Menu Icons bạn có thể thêm nhiều loại icon khác nhau, icon từ máy tính, icon từ font awesome, flaticon, …

plugin Menu Icons hoàn toàn miễn phí 100% nhé! bạn không cần phải biết code.

Contents

Plugin Menu Icons by ThemeIsle

Thêm icon vào menu wordpress theme flatsome với plugin Menu Icons 2

Bước 1: Tìm và cài plugin Menu Icons by ThemeIsle

them-icon-vao-menu-wordpress-3

Bạn đăng nhập vào trang quản trị (admin), bấm vào menu Plugin -> Cài mới

them-icon-vao-menu-wordpress-4

Sau đó, gõ vào thanh tìm kiếm, gõ từ khóa “Menu Icons by ThemeIsle

them-icon-vao-menu-wordpress-5

Icon (ảnh đại diện) của Plugin Menu Icons có thể thay đổi khác đi theo thời gian, nên các bạn xem phần tác giả, nếu đúng là ThemeIsle thì hãy cài plugin nhé!

Bạn cần bấm cài đặt và đợi 30 giây, sau đó bấm kích hoạt để sử dụng plugin nhé!

 

them-icon-vao-menu-wordpress-6

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

Cấu hình menu icons

Sau khi chúng ta đã cài đặt và kích hoạt thành công plugin Menu Icons, để sử dụng, các bạn cần vào menu muốn thêm icon nhé!

Bạn truy cập vào : Giao diện -> Menu (tùy vào website của bạn, có thể sẽ có rất nhiều loại menu, bạn cần chọn đúng menu cần thêm icon ở mục “Chọn menu để sửa“)

them-icon-vao-menu-wordpress-7

 

Tiếp đến, bạn nhìn sang bên trái, sẽ thấy hộp tác vụ Menu Icons Settings, tại tab Global, bạn click chọn loại font icon muốn sử dụng, rồi bấm lưu lại (save settings).

Bạn nên chọn 1 loại font icon thôi, không nên chọn nhiều, để tránh website phải tải quá nhiều font, gây chậm website khi người dùng truy cập vào website của bạn.

them-icon-vao-menu-wordpress-8

Tiếp theo, bạn chọn tab Current Menu để tùy chỉnh thêm các thông số khác (sao cho phù hợp với website wordpress của bạn)

them-icon-vao-menu-wordpress-9

Trong đó:

  • Hide Label: ẩn hoặc hiện nhãn menu.
  • Position: vị trí hiển thị icon (trước hoặc sau nhãn menu).
  • Vertical Align: căn lề cho icon. Cái này các bạn sẽ nhìn thấy rõ nhất trong phần Preview khi chọn icon.
  • Font Size: kích thước icon.
  • SVG Width: độ rộng của SVG.
  • Image Size: kích thước của Image.

Click vào nút Save Settings để lưu lại các thiết lập.

Thêm icon vào menu

Bạn nhìn qua bên phải, chọn menu muốn thêm icon (ví dụ: trang chủ, giới thiệu, liên hệ, tin tức, sản phẩm, dịch vụ,…)

tại dòng Icon: bạn bấm Select để chọn icon

them-icon-vao-menu-wordpress-10

Một cửa sổ sẽ được hiển thị với các icon để cho bạn lựa chọn:

them-icon-vao-menu-wordpress-11

Khi một biểu tượng được chọn, phía bên phải sẽ xuất hiện một số tùy chọn cho phép bạn thay đổi cách mà nó hiển thị. Các thiết lập tổng quan ở bước 3 được sử dụng làm cách hiển thị mặc định.

them-icon-vao-menu-wordpress-12

Một trong những tính năng mà tôi yêu thích là khả năng sử dụng icons từ nhiều gói fonts khác nhau. Nếu một gói không có icon mà bạn đang tìm kiếm, bạn có thể lựa chọn icon từ một gói khác. Sẽ mất chưa đến 5 phút để bạn tìm thấy các biểu tượng phù hợp với menu của mình.

Sau khi hoàn tất, hãy click vào nút Save Changes để lưu menu lại và quay ra trang chủ để kiểm tra kết quả

them-icon-vao-menu-wordpress-2

Thật đơn giản phải không nào? Hy vọng plugin Menu Icons sẽ giúp các bạn nhanh chóng có được một thanh menu đẹp hơn, bắt mắt hơn cho trang web WordPress của mình.

Nguồn: ThemeIsle

Để lại một bình luận

Quay lại
Zalo
Hotline
Facebook
Chat Messenger
Telegram
Email