Cách thêm icon cho menu Flatsome bằng hình ảnh hoặc font chữ

Xin chào các bạn, vì nhiều bạn quan tâm biểu tượng trình đơn đối với theme flatsome vì trước mình cũng làm như vậy, tìm hiểu hết từ chèn ảnh trực tiếp đến cài thêm Plugin, nhưng đầy đủ nhất, đẹp nhất và nhanh nhất thì chỉ có 2 cách, 2 là chèn ảnh nền vào tag before hoặc chèn Fontawesome mẫu mã:trước là đẹp nhất và phân nhánh, Nay Flatsome mình xin giới thiệu với các bạn 2 cách chèn Icon dạng này. Mời các bạn xem chi tiết bên dưới

Cách thêm icon cho menu Flatsome bằng hình ảnh hoặc bằng fontawesome

Đầu tiên mình xin giới thiệu bằng cách chèn ảnh nền, các bạn có thể xem qua ảnh mình làm cho project và chèn Icon với nền.

Đầu tiên . Cách thêm icon cho menu Flatsome bằng hình ảnh

Chuẩn bị ảnh có icon (vì demo là ảnh có link này https://vibavietnam.chowebs.com/wp-content/uploads/2023/01/cart.png )

Chỉ cần chèn đoạn mã sau vào là chúng ta sẽ có ngay một Icon đẹp

Giải thích thêm về mã css này

Dòng này sẽ hiển thị chiều dài và chiều rộng của Beforre (Tôi đang đặt nó thành 25 px)

Chỉnh vị trí chữ (Mình không thích Flatsome để mặc định, nó viết hoa)

Tắt biểu tượng mặc định của xe đẩy

(Mình quên mất là trong Flatsome có tùy chỉnh tắt nhưng aha mình lỡ bấm rồi end luôn)

Sau khi thêm code Css thì ICON mới ra liền (nhớ lưu Icon vào trang bạn nhé), Vì mình dùng màu tối nên Icon màu trắng.

Nếu bạn có màu nền trắng thì nhớ đổi thành ICON màu đen (màu tối)

2. Cách thêm icon cho menu Flatsome với phông chữ tuyệt vời

Cách thêm Font này khá phổ biến và được áp dụng trong nhiều trang chứ không riêng gì menu BIỂU TƯỢNG vị trí của tất cả các Biểu tượng khác trên trang

Để chèn Icon bằng mã Font awesome chúng ta phải thêm plugin có tên phông chữ tuyệt vời

Bạn có thể tham khảo bài viết https://flatsome.xyz/them-font-awesome-vao-flatsome.html

Hoặc chỉ cần chèn mã này mà không cần thêm plugin

Sau khi cài đặt (hoặc thêm mã) bạn có thể thêm đoạn mã sau để sử dụng mã phông chữ làm Biểu tượng

Cách chèn thì như hình này

Sau khi thêm vào, bạn có một ICON với mã phông chữ

Các bạn có thể tham khảo Demo qua link: https://vibavietnam.chowebs.com/

bản tóm tắt Cách thêm icon cho menu Flatsome bằng hình ảnh hoặc bằng Font chữ

Qua bài viết chi tiết trên theo bạn cách nào đơn giản hơn? bằng hình ảnh hoặc bằng phông chữ?

Theo mình thì thường dùng font hơn là ảnh vì ảnh sẽ load chậm hơn hoặc khi đổi màu nền phải sửa màu ảnh cũng như kick thước.. hơi phức tạp.

Còn hàng dùng font chỉ cần Font css là ok

Một cái nữa là cơ sở dữ liệu phông chữ rất phong phú, bạn có thể xem qua tại https://fontawesome.com/v5/icons/

Hãy nhớ chọn một phông chữ MIỄN PHÍ để có thể sử dụng nó!

Qua bài viết trên mình đã giới thiệu cho các bạn 2 cách sử dụng Nice ICON cho menu, hi vọng sẽ giúp ích được phần nào cho các bạn, chỉ cần copy và paste là xong.

Chúc bạn thành công