Hướng Dẫn Sử Dụng Bộ Icon Mặc định Của Flatsome - My 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.

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 Blog My Website!Chúc các bạn một ngày vui vẻ!

4.7/5 - (18 bình chọn)