Bộ Icon Flatsome Đầy Đủ Mới Nhất 2026 – Danh Sách Icon Và Cách Sử Dụng Chi Tiết

Nếu bạn đang sử dụng theme Flatsome cho WordPress, chắc hẳn đã từng cần thêm các biểu tượng (icon) để làm đẹp giao diện website, trang liên hệ, menu, footer hoặc các nút CTA. Tin vui là Flatsome đã tích hợp sẵn một bộ icon riêng giúp bạn sử dụng ngay mà không cần cài đặt thêm Font Awesome hay thư viện icon bên thứ ba.

Trong bài viết này, chúng tôi tổng hợp đầy đủ danh sách icon Flatsome phổ biến nhất cùng hướng dẫn sử dụng trong HTML và CSS.

Vì Sao Nên Sử Dụng Bộ Icon Flatsome Có Sẵn?

Sử dụng icon tích hợp sẵn trong theme Flatsome mang lại nhiều lợi ích:

• Không cần cài đặt thêm plugin icon.
• Giảm số lượng file CSS và font tải về.
• Tăng tốc độ tải trang.
• Đồng bộ thiết kế với giao diện Flatsome.
• Hạn chế xung đột giữa các thư viện icon khác nhau.

Đối với các website doanh nghiệp, bán hàng hoặc blog thông thường, bộ icon Flatsome hoàn toàn đáp ứng tốt nhu cầu sử dụng cơ bản.

Danh Sách Bộ Icon Flatsome

Cách Chèn Icon Flatsome Vào HTML

Bạn có thể sử dụng icon trực tiếp bằng thẻ <i> hoặc <span>.

Ví dụ:

<i class="icon-heart"></i>

<i class="icon-phone"></i>

<span class="icon-chat"></span>

Ví dụ hiển thị nội dung kèm icon:

<i class="icon-phone"></i> Hotline: 0908 979 222

<i class="icon-envelop"></i> Email: contact@example.com

<i class="icon-map-pin-fill"></i> Địa chỉ công ty

Cách Sử Dụng Icon Flatsome Trong CSS

Trong nhiều trường hợp, bạn muốn hiển thị icon thông qua pseudo-element :before hoặc :after.

Ví dụ:

.contact-phone:before{
    content:"e600";
    font-family:"fl-icons";
}

Hoặc tạo icon tùy chỉnh:

.i-love-you:before{
    content:"e906";
    font-family:"fl-icons";
}

Sau đó sử dụng:

<span class="i-love-you"></span>

Mã Unicode Các Icon Flatsome

Một số icon phổ biến:

.icon-phone:before{content:"e600";}
.icon-heart:before{content:"e000";}
.icon-facebook:before{content:"e002";}
.icon-envelop:before{content:"e003";}
.icon-tag:before{content:"e004";}
.icon-star:before{content:"e005";}
.icon-checkmark:before{content:"e00a";}
.icon-instagram:before{content:"e00e";}
.icon-search:before{content:"e012";}
.icon-map-pin-fill:before{content:"e009";}
.icon-youtube:before{content:"e018";}
.icon-clock:before{content:"e01a";}

Bạn có thể mở file font icon của Flatsome để xem toàn bộ mã Unicode tương ứng với từng biểu tượng.

Những Lưu Ý Khi Sử Dụng Icon Flatsome

• Nên ưu tiên icon tích hợp sẵn trước khi cài Font Awesome.
• Không nên sử dụng quá nhiều thư viện icon trên cùng một website.
• Kiểm tra phiên bản Flatsome vì một số icon có thể thay đổi theo từng bản cập nhật.
• Luôn đảm bảo font fl-icons được tải đúng để icon hiển thị chính xác.

Kết Luận

Bộ icon Flatsome là giải pháp nhẹ, nhanh và tối ưu hiệu suất cho website WordPress sử dụng theme Flatsome. Với hàng chục biểu tượng được tích hợp sẵn, bạn có thể dễ dàng xây dựng giao diện chuyên nghiệp mà không cần phụ thuộc vào thư viện icon bên ngoài.

Hy vọng danh sách icon Flatsome đầy đủ trên sẽ giúp bạn dễ dàng lựa chọn và áp dụng cho website của mình. Nếu cần thêm icon đặc biệt, bạn có thể kết hợp cùng Font Awesome hoặc thư viện SVG hiện đại để mở rộng khả năng thiết kế.