Thủ thuật, CSS Ngày 25/09/2022 7090 lượt xem

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…

Lê Anh ĐôngFlatsome trên Google News

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.7/5 - ( Có 23 bình chọn)

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

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 *

Các dịch vụ của FLATSOME.XYZ