3/1/2022 VPS, Hosting tốt nhất Việt Nam
Dịch vụ Hosting, VPS giá rẻ, chất lượng nhất tại Việt Nam, nhập mã giảm giá BHD10 để được giảm thêm 10%: Tại đây
3/1/2022 VPS nước ngoài tốt nhất
Đăng kí VPS giá rẻ tốt nhất nước ngoài và nhận ngay 100$ miễn phí: Tại đây

Tết Nguyên Đán 2022

00
Ngày
00
Giờ
00
Phút
00
Giây

Các cách sử dụng icon flatsome đơn giản

Cách sử dụng icon Flatsome, Nhiều bạn sử dụng Font Awesome khi sử dụng theme flatsome mà quên đi Flatsome có tích hợp sẵn hệ thống Icon khá nhiều. Tại sao không tận dụng để tối ưu tốc độ Website của bạn?

Bảng mã Icon Flatsome

Hiện tại Flatsome hỗ trợ 44 icon có sẵn, nếu có nhu cầu sử dụng thêm thì các bạn nên sử dụng icon SVG để tối ưu tốc độ Website nhé, sử dụng Kit icon thứ 3 sẽ thừa rất nhiều icon không cần sử dụng, dấn đến tốn tài nguyên web không cần thiết.

2 cách sử dụng icon flatsome đơn giản, hiệu quả, tối ưu
2 cách sử dụng icon flatsome đơn giản, hiệu quả, tối ưu

Còn dưới đây là code ứng với từng Icon phía trên.

.icon-lock:before{content:"\e904"}
.icon-user-o:before{content:"\e900"}
.icon-line:before,
.icon-chat:before{content:"\e903"}
.icon-user:before{content:"\e901"}
.icon-shopping-cart:before{content:"\e908"}
.icon-tumblr:before{content:"\e603"}
.icon-gift:before{content:"\e604"}
.icon-phone:before{content:"\e600"}
.icon-play:before{content:"\e605"}
.icon-menu:before{content:"\e800"}
.icon-shopping-basket:before{content:"\e909"}
.icon-shopping-bag:before{content:"\e90a"}
.icon-google-plus:before{content:"\e905"}
.icon-heart-o:before{content:"\e906"}
.icon-heart:before{content:"\e000"}
.icon-500px:before{content:"\e601"}
.icon-vk:before{content:"\e602"}
.icon-angle-left:before{content:"\f104"}
.icon-angle-right:before{content:"\f105"}
.icon-angle-up:before{content:"\f106"}
.icon-angle-down:before{content:"\f107"}
.icon-twitter:before{content:"\e001"}
.icon-envelop:before{content:"\e003"}
.icon-tag:before{content:"\e004"}
.icon-star:before{content:"\e005"}
.icon-star-o:before{content:"\e006"}
.icon-facebook:before{content:"\e002"}
.icon-feed:before{content:"\e008"}
.icon-checkmark:before{content:"\e00a"}
.icon-plus:before{content:"\e00c"}
.icon-instagram:before{content:"\e00e"}
.icon-pinterest:before{content:"\e010"}
.icon-search:before{content:"\e012"}
.icon-skype:before{content:"\e011"}
.icon-dribbble:before{content:"\e013"}
.icon-certificate:before{content:"\f0a3"}
.icon-expand:before{content:"\e015"}
.icon-linkedin:before{content:"\e016"}
.icon-map-pin-fill:before{content:"\e009"}
.icon-pen-alt-fill:before{content:"\e017"}
.icon-youtube:before{content:"\e018"}
.icon-flickr:before{content:"\e019"}
.icon-clock:before{content:"\e01a"}
.icon-snapchat:before{content:"\e902"}

Cách sử dụng icon flatsome

Sử dụng icon flatsome bằng html

<span class="icon-lock" style="font-family:fl-icons; "></span>

Thay icon-lock thành tên icon mà bạn muốn sử dụng theo danh sách dưới đây:

.icon-lock
.icon-user-o
.icon-line
.icon-chat
.icon-user
.icon-shopping-cart
.icon-tumblr
.icon-gift
.icon-phone
.icon-play
.icon-menu
.icon-shopping-basket
.icon-shopping-bag
.icon-google-plus
.icon-heart-o
.icon-heart
.icon-500px
.icon-vk
.icon-angle-left
.icon-angle-right
.icon-angle-up
.icon-angle-down
.icon-twitter
.icon-envelop
.icon-tag
.icon-star
.icon-star-o
.icon-facebook
.icon-feed
.icon-checkmark
.icon-plus
.icon-instagram
.icon-pinterest
.icon-search
.icon-skype
.icon-dribbble
.icon-certificate
.icon-expand
.icon-linkedin
.icon-map-pin-fill
.icon-pen-alt-fill
.icon-youtube
.icon-flickr
.icon-clock
.icon-snapchat

Sử dụng icon flatsome bằng html + css

Đây là cách sử dụng nâng cao và được nhiều bạn lựa chọn nhất, vì tính đa dụng, tùy biến cao của nó.

<span class=”lienhe”></span> Bloghuongdan

Mục đích của các bạn muốn có một icon hiển thị trước Bloghuongdan thì các bạn sẽ sử dụng css như sau:

span.lienhe:before
{
   content:"\e003";
   font-family: fl-icons;
}

Xác định Class css cần sử dụng là span.lienhe

:before có nghĩa là trước class đó.

content:"\e003"; \e003 chính là mã của icon theo bảng phía trên.

font-family: fl-icons;  Dòng code này xác định font mà chúng ta sử dụng là fl-icons nếu không có dòng này thì sẽ không sử dụng được icon flatsome, nên các bạn chú ý nhé.

Kết luận:

Nhiều khi trong theme nó đã có sẵn để các bạn sử dụng, tuy nhiên vẫn có nhiều bạn sử dụng thư viện có sẵn, biết rằng có sẵn sẽ rất đa dạng icon, tuy nhiên nhược điểm của nó là rất nặng.

Xem thêm:

  1. Plugin là gì?
  2. Cách tạo localhost học code.
  3. Tạo shortcode trong WordPress

Nếu như bạn muốn tối ưu tốc độ website, cải thiện hiệu năng, tận dùng những thứ có sẵn của Flatsome thì không nên bỏ qua cách này, nó sẽ giúp ích cho các bạn rất nhiều.

Nếu có thắc mắc các bạn có thể bình luận ngay tại bài viết này, dừng quên chia sẻ nếu bạn cảm thấy bài viết hữu ích.

Tác giả: Blog Hướng Dẫn

Chia sẻ:

Bài viết này hữu ích?

Click để đánh giá!

Đánh giá / 5. Số lượt đánh giá:

No votes so far! Be the first to rate this post.

We will be happy to hear your thoughts

      Leave a reply

      Blog Hướng Dẫn
      Logo