Danh sách icon Font của Flatsome Theme hay Flatsome Icons Font List được hiểu là danh sách các Font Icon mặc định đi kèm với Theme Flatsome.
Cấu trúc của Flatsome Icon Font
Cấu trúc của Flatsome Icons Font được chia làm 2 mục. Trong đó có phần HTML và CSS
HTML Flatsome Icons Font
Định dạng của HTML Flatsome Icons Font được sử dụng bằng thẻ <i>
<!-- Cấu trúc HTML của Flatsome Icons Font. [icon-name] là tên Class -->
<i class="icon-[icon-name]"></i>
<!-- Mã HTML Chi tiết. Mã được sắp xếp theo thứ tự A-Z để bạn dễ hình dung và tìm kiếm. -->
<i class="icon-angle-down"></i>
<i class="icon-angle-left"></i>
<i class="icon-angle-right"></i>
<i class="icon-angle-up"></i>
<i class="icon-certificate"></i>
<i class="icon-chat"></i>
<i class="icon-checkmark"></i>
<i class="icon-clock"></i>
<i class="icon-cross"></i>
<i class="icon-discord"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelop"></i>
<i class="icon-equalizer"></i>
<i class="icon-expand"></i>
<i class="icon-eye"></i>
<i class="icon-eye-blocked"></i>
<i class="icon-facebook"></i>
<i class="icon-feed"></i>
<i class="icon-flickr"></i>
<i class="icon-gift"></i>
<i class="icon-google-plus"></i>
<i class="icon-heart"></i>
<i class="icon-heart-o"></i>
<i class="icon-instagram"></i>
<i class="icon-linkedin"></i>
<i class="icon-lock"></i>
<i class="icon-map-pin-fill"></i>
<i class="icon-menu"></i>
<i class="icon-pen-alt-fill"></i>
<i class="icon-phone"></i>
<i class="icon-pinterest"></i>
<i class="icon-play"></i>
<i class="icon-plus"></i>
<i class="icon-500px"></i>
<i class="icon-search"></i>
<i class="icon-shopping-bag"></i>
<i class="icon-shopping-basket"></i>
<i class="icon-shopping-cart"></i>
<i class="icon-skype"></i>
<i class="icon-snapchat"></i>
<i class="icon-star"></i>
<i class="icon-star-o"></i>
<i class="icon-tag"></i>
<i class="icon-telegram"></i>
<i class="icon-tiktok"></i>
<i class="icon-tumblr"></i>
<i class="icon-twitch"></i>
<i class="icon-twitter"></i>
<i class="icon-user"></i>
<i class="icon-user-o"></i>
<i class="icon-vk"></i>
<i class="icon-whatsapp"></i>
<i class="icon-x"></i>
<i class="icon-youtube"></i>
CSS Flatsome Icons Font
Để chỉ định cho việc hiển thị Flatsome Icons Font thì bạn chỉ cần đặt tên các class được thiết lập sẵn trong danh sách dưới đây.
/*
* Cấu trúc CSS của Flatsome Icons Font. [icon-name] là tên Class.
* Ví dụ <i class="icon-heart"></i>
* Mã được sắp xếp theo thứ tự A-Z để bạn dễ hình dung và tìm kiếm.
*/
[icon-name]:
angle-down
angle-left
angle-right
angle-up
certificate
chat
checkmark
clock
cross
discord
dribbble
envelop
equalizer
expand
eye
eye-blocked
facebook
feed
flickr
gift
google-plus
heart
heart-o
instagram
linkedin
lock
map-pin-fill
menu
pen-alt-fill
phone
pinterest
play
plus
500px
search
shopping-bag
shopping-basket
shopping-cart
skype
snapchat
star
star-o
tag
telegram
tiktok
tumblr
twitch
twitter
user
user-o
vk
whatsapp
x
youtube
Pseudo CSS nếu bạn không chỉnh sửa được HTML
Ví dụ, bạn muốn hiển thị cho một class nào đó mà muốn hiển thị icon trái tim thì sử dụng kỹ thuật Pseudo CSS như danh sách bên dưới. Mình để tên Class của Font Flatsome Icon mặc định để bạn dễ hình dung và tìm kiếm. Thực tế bạn đặt class là gì cũng được chỉ cần trỏ đúng Pseudo là được. Ví dụ với icon mũi tên xuống, bạn trỏ :before
với content: '\e601'; font-family: fl-icons !important;
là tự động nhận diện và hiển thị icon hình trái tim cho bạn. Khá đơn giản đúng không.?
/*
* Mã được sắp xếp theo thứ tự A-Z để bạn dễ hình dung và tìm kiếm.
*/
.icon-500px:before {
content: '\e601';
font-family: fl-icons !important;
}
.icon-angle-down:before {
content: '\f107';
font-family: fl-icons !important;
}
.icon-angle-left:before {
content: '\f104';
font-family: fl-icons !important;
}
.icon-angle-right:before {
content: '\f105';
font-family: fl-icons !important;
}
.icon-angle-up:before {
content: '\f106';
font-family: fl-icons !important;
}
.icon-checkmark:before {
content: '\e00a';
font-family: fl-icons !important;
}
.icon-certificate:before {
content: '\f0a3';
font-family: fl-icons !important;
}
.icon-chat:before {
content: '\e903';
font-family: fl-icons !important;
}
.icon-clock:before {
content: '\e01a';
font-family: fl-icons !important;
}
.icon-dribbble:before {
content: '\e013';
font-family: fl-icons !important;
}
.icon-envelop:before {
content: '\e003';
font-family: fl-icons !important;
}
.icon-expand:before {
content: '\e015';
font-family: fl-icons !important;
}
.icon-facebook:before {
content: '\e002';
font-family: fl-icons !important;
}
.icon-feed:before {
content: '\e008';
font-family: fl-icons !important;
}
.icon-flickr:before {
content: '\e019';
font-family: fl-icons !important;
}
.icon-gift:before {
content: '\e604';
font-family: fl-icons !important;
}
.icon-google-plus:before {
content: '\e905';
font-family: fl-icons !important;
}
.icon-heart:before {
content: '\e000';
font-family: fl-icons !important;
}
.icon-heart-o:before {
content: '\e906';
font-family: fl-icons !important;
}
.icon-instagram:before {
content: '\e00e';
font-family: fl-icons !important;
}
.icon-linkedin:before {
content: '\e016';
font-family: fl-icons !important;
}
.icon-lock:before {
content: '\e904';
font-family: fl-icons !important;
}
.icon-map-pin-fill:before {
content: '\e009';
font-family: fl-icons !important;
}
.icon-menu:before {
content: '\e800';
font-family: fl-icons !important;
}
.icon-pen-alt-fill:before {
content: '\e017';
font-family: fl-icons !important;
}
.icon-phone:before {
content: '\e600';
font-family: fl-icons !important;
}
.icon-pinterest:before {
content: '\e010';
font-family: fl-icons !important;
}
.icon-play:before {
content: '\e605';
font-family: fl-icons !important;
}
.icon-plus:before {
content: '\e00c';
font-family: fl-icons !important;
}
.icon-search:before {
content: '\e012';
font-family: fl-icons !important;
}
.icon-shopping-bag:before {
content: '\e90a';
font-family: fl-icons !important;
}
.icon-shopping-basket:before {
content: '\e909';
font-family: fl-icons !important;
}
.icon-shopping-cart:before {
content: '\e908';
font-family: fl-icons !important;
}
.icon-skype:before {
content: '\e011';
font-family: fl-icons !important;
}
.icon-snapchat:before {
content: '\e902';
font-family: fl-icons !important;
}
.icon-star:before {
content: '\e005';
font-family: fl-icons !important;
}
.icon-star-o:before {
content: '\e006';
font-family: fl-icons !important;
}
.icon-tag:before {
content: '\e004';
font-family: fl-icons !important;
}
.icon-telegram:before {
content: '\e90b';
font-family: fl-icons !important;
}
.icon-tumblr:before {
content: '\e603';
font-family: fl-icons !important;
}
.icon-twitter:before {
content: '\e001';
font-family: fl-icons !important;
}
.icon-user:before {
content: '\e901';
font-family: fl-icons !important;
}
.icon-user-o:before {
content: '\e900';
font-family: fl-icons !important;
}
.icon-vk:before {
content: '\e602';
font-family: fl-icons !important;
}
.icon-whatsapp:before {
content: '\e90c';
font-family: fl-icons !important;
}
.icon-x:before {
content: '\e90d';
font-family: fl-icons !important;
}
.icon-youtube:before {
content: '\e018';
font-family: fl-icons !important;
}
Minh họa sâu hơn