Tất cả các icon mặc định của Theme Flatsome

Dưới đây là bảng mã icon có sẵn của theme flatsome, bạn có thể sử dụng ngay mà không cần cài đặt thêm bộ icons từ bên thứ 3. Mặc dù có đôi chút hạn chế về số lượng icon, tuy nhiên, mình tin là bộ flatsome icons này sẽ thỏa mãn tốt nhu cầu khi bạn đang không cần quá nhiều icon và e ngại cồng kềnh khi load 1 thư viện icon như Font Awesome Icons

 Danh sách flatsome icons được tích hợp sẵn trong theme 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"}

Hiển thị icon với CSS trên

Ví dụ, mình có đoạn html text: <p class=”office-location”> Địa Chỉ</p>

Và mình muốn chèn icon Map lên trước đoạn text, mình sẽ thêm dòng CSS sau:

.office-location:before{

   content:"\e009";

   font-family: fl-icons;

}

Tương tự như vậy, bằng cách sử dụng CSS, các bạn có thể chèn bộ icon có sẵn của Flatsome vào vị trí bất kỳ mà bạn muốn.

Cách sử dụng & Hiển thị Flatsome Icons