Thư viện mặc định Flatsome icon của theme Flatsome

Đỗ Minh Nhựt 04/08/2022 216 Views

5/5 - (3 bình chọn)

Tổng hợp bộ icon Flatsome bao gồm các icon được tích hợp sẵn trong theme Flatsome, bạn có thể sử dụng ngay mà không cần cài đặt thêm icon của bên thứ 3.

Tuy còn một số hạn chế, tuy nhiên mình tin Bộ icon Flatsome này sẽ thỏa mãn nhu cầu của bạn khi không cần quá nhiều icon và ngại trang web cồng kềnh.

 icon-lock
 icon-line
 icon-chat
 icon-user
 icon-shopping-cart
 icon-tumblr
 icon-gift
 icon-phone
 icon-play
 icon-menu
 icon-shopping-basket

 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-shopping-bag

 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

Để hiển thị icon chat, các bạn sử dụng class “icon-chat” chèn vào html của span hoặc thẻ i như sau:


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

Mặc khác, nếu bạn muốn css nó hiện thị dạng :before hay :after thì hãy sử dụng như dưới đây:

.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"}

Ví dụ

.i-love-you:before{
   content:"\e906";
   font-family: fl-icons;
}

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

Chia sẻ bài viết:
0 0 đánh giá
Đánh giá bài viết
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận