ĐẶT CÂU HỎI

Tab icon đẹp cho theme flatsome – chowebs.com

Tab icon đẹp cho theme flatsome - chowebs.com

Thay vì dùng 1 plugin để custom tab đẹp và long lanh , Hôm nay tớ giới thiệu các bạn cách custom tab icon theme flatsome đẹp nhé

Tab icon đẹp cho theme flatsome – chowebs.com

Tab icon đẹp cho theme flatsome - chowebs.com
Tab icon đẹp cho theme flatsome – chowebs.com

 

Thay vì dùng tab bằng Flugin hoặc HTML nhúng sao ta không dùng chính Tab của Flatsome nhi 🙂 , Để tìm hiểu nhiều hơn cách chèn hèn vào tab ta có thể tìm hiểu qua bài

Cách làm Tab icon đẹp cho theme flatsome

Để làm tab có Icon màu đẹp như hình , ta tạo 1 block như hình và đặt class = iphone14 ( class này mình dùng trong css bên dưới )

Cách làm Tab icon đẹp cho theme flatsome
Cách làm Tab icon đẹp cho theme flatsome
Cách làm Tab icon đẹp cho theme flatsome
Cách làm Tab icon đẹp cho theme flatsome

Chú ý : 

Chọn Tab Dạng Simple

Mỗi tab đặt 1 màu – Cái name nó sẽ là ID của tab và dùng nó để css , Nên dùng tiếng anh hoặc tiếng việt không dấu .

sau khi làm 2 việc trên xong ta chèn css vào là xong nhé

Giải thích 1 xíu về CSS trên 

  • class có tên .iphone14 li#tab-xanh  => là tab có tên mình đặt là name là XANH ( ở hình trên )
  • class .iphone14 ul li span { visibility: hidden; } => Cho phép ẨN text name của tab đi nhưng ko ẩn tab ( nó khác với Dislay :none nhé )
  • Class .iphone14 ul.nav.nav-simple.nav-uppercase.nav-size-normal.nav-center { order: 2; padding-top: 10px; } => Chuyển vị trí từ Phía trên xuống dưới nhé

OK xong bạn chỉ việc lưu lại thôi và xem kết quả nào

Tab icon đẹp cho theme flatsome - chowebs.com

 

Chúc anh chị thành công

theo : https://chowebs.com/tab-icon-dep-cho-theme-flatsome-chowebs-com.html

Điểm 4.6/5 - ( Có 19 bình chọn)
Bài viết được viết bợi Flatsome.xyz và đăng ký bản quyền tại DMCA Protection Status
- Ghi rõ nguồn góc bài viết khi bạn đăng lại bài viết này !
- Hãy tôn trọng người khác nghĩa là bạn đang tôn trọng chính mình !

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 *