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"}

.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>

1 2	<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

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;
}

.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.

Xem thêm:

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

Hiển thị icon với CSS

Bài viết cùng chủ đề:

Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed

Cách tắt tính năng tự động cập nhật trong WordPress (auto update)

Xoá chữ CATEGORY ARCHIVES trong theme Flatsome

Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS

Hướng dẫn custom bộ lọc của woocommerce wordpress

Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome

Hướng dẫn các tạo bảng thông tin khuyến mãi và chỉ hiển thị cho các sản phẩm được lựa chọn

Hướng dẫn cách thêm các gợi ý đánh giá tự động cho woocommerce – Hỗ trợ SEO

Code tự động lưu ảnh vào host khi copy nội dung từ website khác

Sửa lỗi file tìm kiếm search của Flatsome bị treo khi tìm kiếm

Lập Kế Hoạch Digital Marketing – Phiên Bản Tinh Gọn

21 Cách tăng 3 lần tỷ lệ chuyển đổi của các trang E-Commerce

10 Yếu Tố Xếp Hạng Từ Khóa SEO Google (Cập Nhật 03/2020)

Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form

Trả lời Hủy

Phần mềm bản quyền

Update sản phẩm

Thêm mới sản phẩm

Đặt hàng, thanh toán

Hiển thị icon với CSS

Bài viết cùng chủ đề:

Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed

Cách tắt tính năng tự động cập nhật trong WordPress (auto update)

Xoá chữ CATEGORY ARCHIVES trong theme Flatsome

Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS

Hướng dẫn custom bộ lọc của woocommerce wordpress

Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome

Hướng dẫn các tạo bảng thông tin khuyến mãi và chỉ hiển thị cho các sản phẩm được lựa chọn

Hướng dẫn cách thêm các gợi ý đánh giá tự động cho woocommerce – Hỗ trợ SEO

Code tự động lưu ảnh vào host khi copy nội dung từ website khác

Sửa lỗi file tìm kiếm search của Flatsome bị treo khi tìm kiếm

Lập Kế Hoạch Digital Marketing – Phiên Bản Tinh Gọn

21 Cách tăng 3 lần tỷ lệ chuyển đổi của các trang E-Commerce

10 Yếu Tố Xếp Hạng Từ Khóa SEO Google (Cập Nhật 03/2020)

Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form

Trả lời Hủy

Đăng nhập

Đăng ký