Flatsome Tips
Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome
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"> icon chat</i>
<span class="icon-chat" style="font-family:fl-icons;"> icon chat</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.
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 Blog My Website!
Chúc các bạn một ngày vui vẻ!
