Tổng hợp bộ Flatsome icons 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 bộ icons từ bên thứ 3. Mặc dù có đôi chút hạn chế, 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 cho website.
Bộ mã Flatsome icons được tích hợp sẵn trong theme:
.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 & HIỂN THỊ FLATSOME ICONS
Để hiển thị bộ icon của Flatsome, các bạn có thể sử dụng thẻ i hoặc thẻ span trong html với class của icon để hiển thị icon mà bạn muốn.
Ví dụ: Để 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-chat"> chat icon</i> <span class="icon-chat" style="font-family:fl-icons;"> chat icon</span>
Đây là kết quả hiển thị: icon chat icon chat
Dưới đây là danh sách Flatsome icons mình đã sử dụng class của icon bằng thẻ i để hiển thị các icon, và file text kế bên là các class của icon, các bạn có thể thay thế các class này để hiển thị icon mà bạn muốn.
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-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 với CSS
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ảm ơn các bạn đã ghé qua Công Nghệ 360!
Chúc các bạn một ngày vui vẻ!