Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome

 2 Tháng Chín, 2021

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.

Share

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)
Theo dõi
Thông báo của
guest

1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Zem Design
Zem Design
6 tháng trước

Cảm ơn bạn. Mình vừa áp dụng cho website nội thất ZEM bên mình. Gọn lẹ dễ sử dụng

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
0935 355 881 Zalo Chat Mẫu Website