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

Chào các bạn , do có nhiều bạn quan tâm đến Icon menu cho theme flatsome do trước đây mình cũng thế , tìm tòi đủ cả từ chèn hình trực tiếp đến cài thêm Plugin , Tuy nhiên cách hoàn thiện , đẹp và nhanh nhất chỉ có 2 cách , 2 chèn hình background trong thẻ before hoặc chèn mã Fontawesome dạng :before  là đẹp và nhánh nhất , Nay Flatsome Xin giới thiệu tới các bạn 2 cách chèn dạng Icon này nhé . Mời anh em đón xem chi tiết bên dưới nhé

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

Trước tiên mính xin giới thiệu bằng cách chèn background hình nhé , bạn có thể xem qua hình mình đã làm cho dự án và chèn Icon bằng background nhé

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

1 . Cách thêm icon cho menu Flatsome bằng hình ảnh

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

chỉ cần chèn mã sau vào la ta có Icon đẹp liền nhé

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

dòng này sẽ hiện thì chiều dài và rộng của Beforre ( minh đang để là 25 px )

Chỉnh lại độ đứng của chữ ( mình ko thích mặc định của Flatsome nó in hoa chữ lên )

Tắt icon mặc định của cart 

( tớ quên là trong Flatsome có tùy chỉnh tắt nó mà  aha thôi lỡ rồi dứt luôn )

Sau khi thêm code Css xong là ICON mới là liền ( nhớ lưu cái Icon qua trang của bạn nhé ) , Do mình dùng màu nên tối nên Icon là màu trắng

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

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

 

2. Cách thêm icon cho menu Flatsome bằng fontawesome 

cách thêm bằng Font này khá phổ biến và được áp dụng nhiều trong trang , không chỉ là ICON menu mà tất cả các Icon vị trí khác trên trang

Để chèn được Icon dùng mã Font awesome ta phải thêm plugin có tên là  Font Awesome 

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

Hoặc chỉ cần chèn đoạn mã này ko cần thêm Plugin nhé

Sau khi cài xong ( hoặc thêm mã xong ) bạn có thể thêm mã sau để dùng mã font làm Icon nhé

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

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

 

Sau khi thêm xong bạn có ICON bằng mã font rồi nhé

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

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

 

Tổng kết  Cách thêm icon cho menu Flatsome bằng hình ảnh hoặc bằng Font

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

Theo quan điểm của mình hay dùng thì mình thì mình thường sự dụng font hơn là hÌnh ảnh lý do là ảnh load sẽ chậm hơn hoặc khi thay đổi màu nền thì phải fix lại màu ảnh cũng như kick thước .. hơi phức tạp

trong kho dùng font chĩ cần css Font là là ok

Cái nữa là Kho dự liệu font rất phong phú , bạn có thể kiểm tra tại https://fontawesome.com/v5/icons/

Nhớ chọn Font dạng FREE để có thể dùng nó nhé !

Cách thêm icon cho menu Flatsome bằng hình ảnh hoặc bằng fontawesome
Cách thêm icon cho menu Flatsome bằng hình ảnh hoặc bằng fontawesome – HEAD sau khi hoàn thành chỉnh sửa ICON nhé 

Qua bài trên mình giới thiệu bạn 2 cách dùng ICON  Đẹp cho menu , Hi vọng sẽ giúp được anh em phần nào , chỉ cần coppy và dán là xong nhé

Chúc Anh em thành công

Điểm 5/5 – ( Có 6 bình chọn)

Đánh giá post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *