Flatsome Icons Font - Bộ Icons mặc định Theme Flatsome

Flatsome Icons Font là bộ icons font tích hợp sẵn khi chúng ta mua theme Flatsome trên các nền tảng cung cấp, hoặc tải trên các mạng xã hội chia sẻ.

Flatsome Icons Font được tạo ra để làm gì.?

Flatsome Icons Font được tạo ra để sử dụng và thay thế cho icons font mặc định của WordPress hoặc của bên thứ Ba như Font Awesome, Font Tello …

Ưu điểm khi sử dụng Bộ icons font mặc định của Flatsome Theme

Dưới đây Flatsome.IO xin liệt kê một số ưu điểm của Bộ icons font mặc định theme Flatsome

Tích hợp trực tiếp với Theme Flatsome dẫn đến Website tải nhanh hơn.
Tích hợp sẵn một số các icons thường xuyên sử dụng như cộng, trừ, lên xuống, trái, phải, các mạng xã hội như Facebook, Twitter, TikTok, Linkedin …
Tương đối dễ sử dụng khi chỉ cần chèn mã CSS hoặc mã HTML là đã có thể sử dụng

Nhược điểm khi sử dụng Bộ icons font mặc định của Flatsome

Flatsome.IO xin liệt kê một số nhược điểm của Bộ Flatsome Icons Font:

Số lượng icons còn ít. Khoảng 45 icons
Kiểu dáng icons cũng không thực sự quá đẹp, chỉ ở mức đủ dùng.
Nếu Bạn dùng Font Icons bên ngoài thì Flatsome vẫn load bộ Icons này

Các dạng hiển thị và sử dụng của Bộ Icons Font Flatsome

Có nhiều dạng hiển thị với các Icons Font, tuy nhiên Flatsome đã quy ước chúng ta sử dụng và hiển thị dưới 02 dạng là:

Dạng sử dụng CSS = Cascader Style Sheet
Dạng sử dụng HTML = Hyper Text Markup Language

Danh sách Flatsome Icons Font dưới dạng CSS

Dưới đây là Bảng mã CSS sử dụng bộ icons font của Flatsome.

/* Danh sách bộ icons font flatsome dạng CSS */

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

Như chúng ta thấy ở trên, Bộ Icons Font này được sử dụng bằng kỹ thuật CSS dạng ::before hoặc ::after

Giả sử nếu chúng ta sử dụng icon font mang tên Facebook thì chúng ta dùng như sau:
.icon-facebook:before{content:"\e002"}

Danh sách Icons Font Flatsome sử dụng dưới dạng HTML

Dựa trên kinh nghiệm sử dụng Flatsome lâu năm. Cách sử dụng mã HTML thực ra không phải ai cũng biết, mặc dù nó chỉ là vài dòng mã HTML mà thôi. Dưới đây là danh sách HTML icons font flatsome.

<!-- Danh sách mã hiển thị Flatsone Icons Font mặc định -->

<i class="icon-lock"> icon-lock</i>
<i class="icon-line"> icon-line</i>
<i class="icon-chat"> icon-chat</i>
<i class="icon-user"> icon-user</i>
<i class="icon-shopping-cart"> icon-shopping-cart</i>
<i class="icon-tumblr"> icon-tumblr</i>
<i class="icon-gift"> icon-gift</i>
<i class="icon-phone"> icon-phone</i>
<i class="icon-play"> icon-play</i>
<i class="icon-menu"> icon-menu</i>
<i class="icon-shopping-basket"> icon-shopping-basket</i>
<i class="icon-shopping-bag"> icon-shopping-bag</i>
<i class="icon-google-plus"> icon-google-plus</i>
<i class="icon-heart-o"> icon-heart-o</i>
<i class="icon-heart"> icon-heart</i>
<i class="icon-500px"> icon-500px</i>
<i class="icon-vk"> icon-vk</i>
<i class="icon-angle-left"> icon-angle-left</i>
<i class="icon-angle-right"> icon-angle-right</i>
<i class="icon-angle-up"> icon-angle-up</i>
<i class="icon-angle-down"> icon-angle-down</i>
<i class="icon-twitter"> icon-twitter</i>
<i class="icon-envelop"> icon-envelop</i>
<i class="icon-tag"> icon-tag</i>
<i class="icon-star"> icon-star</i>
<i class="icon-star-o"> icon-star-o</i>
<i class="icon-facebook"> icon-facebook</i>
<i class="icon-feed"> icon-feed</i>
<i class="icon-checkmark"> icon-checkmark</i>
<i class="icon-plus"> icon-plus</i>
<i class="icon-instagram"> icon-instagram</i>
<i class="icon-pinterest"> icon-pinterest</i>
<i class="icon-search"> icon-search</i>
<i class="icon-skype"> icon-skype</i>
<i class="icon-dribbble"> icon-dribbble</i>
<i class="icon-certificate"> icon-certificate</i>
<i class="icon-expand"> icon-expand</i>
<i class="icon-linkedin"> icon-linkedin</i>
<i class="icon-map-pin-fill"> icon-map-pin-fill</i>
<i class="icon-pen-alt-fill"> icon-pen-alt-fill</i>
<i class="icon-youtube"> icon-youtube</i>
<i class="icon-flickr"> icon-flickr</i>
<i class="icon-clock"> icon-clock</i>
<i class="icon-snapchat"> icon-snapchat</i>

Như đã thấy chúng ta dễ dàng thêm HTML dưới dạng thẻ HTML dưới dạng thẻ . Ngoài ra chúng ta có thể sử dụng các thẻ khác như thẻ  thẻ  … etc

Ví dụ chúng ta sử dụng Icon Font Facebook dưới dạng HTML như sau:


 icon chat

Ví dụ về hiển thị dạng HTML khi bạn lướt Website bất kỳ sử dụng Theme Flatsome

Với dạng hiển thị trên trình duyệt như trên rất dễ dàng để bạn có thể chọn cho mình các icon để sử dụng nếu website của bạn không sử dụng quá nhiều icons font. Điều đó sẽ giúp bạn tăng 3-8 điểm Google PageSpeed Insight ^^

Tổng kết

Như vậy là Flatsome.IO đã trình bày đến Quý anh chị và các Bạn Bộ Flatsome Icons Font mặc định. Hi vọng bài viết này giúp ích anh chị và các bạn nhiều hơn trong công việc / dự án / website của mình sử dụng Theme Flatsome.

Để tải theme Flatsome bản mới nhất xin vui lòng truy cập Link này:

Để Active Kích hoạt Bản quyền Flatsome xin vui lòng truy cập và tải: Plugin Flatsome Activator

Để mua bản quyền để được hưởng chính sách Update Lifetime xin truy cập Link này:

Xin cám ơn và xin kính chúc Quý anh chị và các Bạn sức khỏe, hạnh phúc và thành đạt.

Trân trọng kính chào và hẹn gặp lại trong các Bài đăng tiếp theo.!

Cập nhật lúc 17:20 ngày 21 Tháng Mười Một, 2022

Flatsome Icons Font – Bộ Icons mặc định Theme Flatsome