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

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.

Để 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!