Flatsome icon

Tổng hợp icon có sẵn trong theme flatsome

Nếu bạn dùng theme flatsome mà không cần quá nhiều icon thì ko cần dùng font awesome hoặc font icon từ bên thứ 3

Mình thì cứ font có sẵn của flatsome mà phang thôi.

Dưới đây là bảng mã icon có sẵn của flatsome

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

Sử dụng :

Flatsome icon

 

Hiển thị icon bằng thẻ html

<span class="icon-lock" style="font-family:fl-icons; "></span> Đây là icon Lock của flatsome

Bạn sử dụng thẻ span hoặc thẻ i có class của icon bạn muốn để hiển thị icon

.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

Hiển thị icon bằng css

Mỗi icon tương ứng với một content css before

Giả sử bạn có một thẻ <span class=”lienhe”></span> something@something.com và muốn chèn icon phone vào trước dòng này thì các bạn css bổ sung như sau :

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

Bài viết này mình giới thiệu đến các bạn bộ icon có sẵn trong theme flatsome, đủ cho bạn sài đáp ứng các nhu cầu về icon cần thiết cho website để không phải chèn thêm bộ font icon khác vào website cho nặng.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments