Danh sách Flatsome Icons và cách sử dụng

Chào bạn, trong bài viết này thietkewebsitephuyen.com lưu lại danh sách Flatsome Icons và cách sử dụng trên website dùng theme Flatsome. Bạn nào đang cần thêm icon vào menu, danh sách hoặc chèn vào post-info chẳng hạn thì tham khảo thử nhé !

Danh sách Flatsome Icons và cách sử dụng

Danh sách Flatsome Icons

Dưới đây là danh sách Flatsome Icons dạng text để bạn copy dán vào  HTML của văn bản. Bạn cứ lấy mã icon bên dưới và đặt vào trong đoạn HTML mẫu sau và bỏ vào  nơi bạn muốn trên website dùng Flatsome, ví dụ: <i class="icon-chat"></i>

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

Sử dụng Flatsome Icons

Khi bạn dựng trang với UX builder thì dễ rồi, thích chọn icon nào thì chọn và căn chỉnh trong phần kéo thả đó luôn. Tuy nhiên, trong những trường hợp bạn cần chèn Flatsome Icons vào thanh menu, post-info chẳng hạn thì phải viết CSS  riêng cho icon đó. Ví dụ như dưới đây là mình chèn icon vào thanh menu.

Ví dụ sử dụng Flatsome icon trên thanh menu

Kết quả như hình trên,là mình làm cho icon demo nó lệch sang một bên và màu đỏ để bạn dễ hình dung về tùy chỉnh vị trí chứ không có đẹp, để mặc định cũng oke rồi, muốn đẹp thì bạn căn chỉnh lại CSS theo ý về màu sắc, khoảng cách, kích cỡ ^^

.nav li.has-icon-left>a>i{
margin-right: 25px;
color: red;
}

Ngoài ra, nếu bạn thấy icon trên không đủ đáp ứng nhu cầu thì có thể tham khảo thêm phương án dùng icon ảnh hoặc bộ icon của các bên khác như của Google Fonts Icons | Font Awesome Icons