Hướng dẫn thêm Icon vào Button trong giao diện Flatsome

Chào các bạn, có vẻ các bạn sẽ thắc mắc là một số Website sử dụng Theme Flatsome lại có biểu tượng Icon phía trước các nút. Nhưng bên trong UX Builder trên Flatsome lại không có trường thêm Icon vào. Vậy thì phải làm sao? Xem phía dưới nhé.

Yêu cầu chuẩn bị

Để tiến hành thực hiện thao tác, các bạn cần có các công cụ sau:

Plugin Font Awesome sau khi tải về và kích hoạt, các bạn truy cập theo đường dẫn sau: Cài đặt -> Font Awesome -> Method -> Webfont để tiến hành sử dụng font cho Website nhé.

Thêm Class cho Button trên Flatsome trong UX Builder

Trong giao diện UX Builder, các bạn tạo Button và nhập vào trường Class tên ký hiệu mà bạn mong muốn.

Ví dụ: Nút “Gọi ngay” thì thêm class “goi-ngay”.

Và nhớ là đừng bao giờ gõ có dấu hoặc dấu cách trong trường này nhé.

Đưa Icon vào Button trong giao diện Flatsome

Sau khi đã tạo Class cho button thành công các bạn Copy đoạn Css sau bỏ vào ô tùy chỉnh CSS trong giao diện:

CSS:
.button.*ten-class{padding-left: 40px;}.button.*ten-class:before{content: "\f03e";font-family: FontAwesome;width: 0;height: 0;border-style: solid;border-width: 7px 10px 7px;border-color: transparent;transition: all .4s;position: absolute;top: -7px;left: 0;display: block;margin: 0 auto;}

Các bạn đổi *ten-class thành tên class của button mà bạn đã nhập, và sửa đoạn tô đậm của “content: “\f03e“;” thành mã icon mà bạn muốn dùng. Sau khi đã đổi thành công, thành quả sẽ được như sau: xem demo.

Và đây là trang tổng hợp mã icon: xem chi tiết

Chúc các bạn thực hiện thành công ngoài ra các bạn có thể xem thêm các bài viết liên quan tại chuyên mục hướng dẫn thiết kế website đẹp nhé.

Liêm MKT – Thietkewebfree

Trả lời

Facebook
Youtube
Zalo
Gọi Liêm