[Flatsome Icon Font] Danh sách icon Font của Flatsome Theme

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.

Danh sách icon Font của Flatsome Theme | Flatsome Icons Font List
Danh sách icon Font của Flatsome Theme | Flatsome Icons Font List

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

Hình ảnh minh họa các Icon Flatsome và Tên Class

Hình ảnh minh họa các Icon Flatsome và Tên Class
Hình ảnh minh họa các Icon Flatsome và Tên Class
4.5/5 - (143 Yêu thích)

Về Tác giả

Founder
Trần Đạo aka RealDev là một lập trình viên PHP, một SEO chuyên nghiệp, làm việc toàn thời gian và lâu năm với WordPress. Tôi có nhiều kinh nghiệm cho các dự án SEO. Tôi cũng đã tham gia vào thiết kế, vận hành các Website WordPress trong nhiều lĩnh vực như TMĐT, Nội thất, Du lịch, Văn phòng, Công ty, Đơn vị ... Tôi cũng là chủ sở hữu Website RealDev.vn và cũng là nhà sáng lập cộng đồng VietCoders Community. Tôi là Founder và CEO của RealGOOD Quintessence JSC.
Xem thêm

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Facebook Facebook
Zalo Zalo
Phone Phone
Đã Copy vào Bộ nhớ tạm
Trang web này sử dụng cookie để cung cấp cho bạn trải nghiệm duyệt web tốt hơn. Bằng cách duyệt trang web này, bạn đồng ý với việc chúng tôi sử dụng cookie.