Sử dụng 45 icon có sẵn của Flatsome không cần cài plugin Fontawesome

Flatsome là một trong những theme WordPress được yêu thích, nổi tiếng với tính linh hoạt, nhiều tính năng hữu ích, bao gồm cả bộ icon có sẵn của Flatsome. Trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng và tùy chỉnh bộ icon Flatsome một cách chi tiết.

1. Tổng quan về Flatsome icons

Flatsome tích hợp sẵn một bộ icon đa dạng, bao gồm các biểu tượng phổ biến như giỏ hàng, người dùng, khóa, v.v. Bạn có thể sử dụng những icon này trong các trang web của mình mà không cần cài đặt thêm thư viện từ bên thứ ba, giúp giảm dung lượng và tăng hiệu suất.

Xem thêm: Xử Lý Ảnh Thumbnail Bị Mờ trang Post của Theme Flatsome

2. Danh sách Flatsome icons

Dưới đây là danh sách các class tương ứng với từng icon trong bộ Flatsome. Bạn có thể sử dụng các class này để hiển thị icon theo ý muốn:

 .icon-lock:before { content: "\e904"}
 .icon-user-o:before { content: "\e900" }
 .icon-line:before { content: "\e903" }
 .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" }

3. Cách sử dụng icon có sẵn của Flatsome trong HTML

Để hiển thị một icon có sẵn của Flatsome trong HTML, bạn cần sử dụng các thẻ như <i> hoặc <span> và thêm class tương ứng với icon bạn muốn hiển thị.

Ví dụ đơn giản: Để hiển thị icon “chat”, bạn có thể dùng thẻ <i> hoặc <span> như sau:

<i class="icon-clock"> Clock</i>
<span class="icon-clock" style="font-family: fl-icons;"> Clock</span>

Sử dụng trong các yếu tố khác: Bạn cũng có thể thêm icon vào các nút (button), menu, hoặc các thành phần khác để tăng cường trải nghiệm người dùng.

4. Hiển thị icon bằng CSS

Ngoài việc sử dụng trực tiếp trong HTML, bạn có thể thêm icon vào các yếu tố khác thông qua CSS. Đây là cách hiệu quả để gắn icon vào trước hoặc sau nội dung văn bản.

Ví dụ với CSS: Để thêm icon “phone” trước một số điện thoại trong đoạn văn bản, bạn có thể sử dụng CSS như sau:

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

Với cách này, bạn có thể linh hoạt đặt icon vào bất kỳ vị trí nào bạn muốn, giúp thiết kế trở nên tinh tế và chuyên nghiệp hơn.

5. Lời kết

Việc sử dụng bộ icon có sẵn của Flatsome có thể giúp bạn tạo ra giao diện thân thiện và chuyên nghiệp. Hãy sử dụng các hướng dẫn trên để tích hợp icon vào trang web của bạn theo cách bạn thích. Chúc bạn tạo được những thiết kế tuyệt vời và thu hút được nhiều người dùng!

Hy vọng rằng hướng dẫn này sẽ giúp bạn hiểu rõ hơn về cách sử dụng các icon có sẵn của Flatsome. Cảm ơn bạn đã ghé thăm blog của chúng tôi! Chúc bạn có một ngày vui vẻ và làm việc hiệu quả!