Tạo element iconbox với tùy chọn icon là fontawesome

Hello Ae! Như Flatsome hiện tại chúng ta có iconbox, nhưng chỉ cho upload image. Nhu cầu của nhiều anh em lại thích lựa chọn icon từ fontawesome.

Thông thường muốn dùng thì ae phải trải qua nhiều công đoạn để xử lý thành dạng ảnh.

Vì thế code này ra đời giúp ae có thể chọn icon fontawesome.

Thành quả sau khi thực hiện!

Tạo element iconbox cho flatsome
Tạo element iconbox cho flatsome

Demo cụ thể ở theme Bags

Bắt đầu thôi!

Tạo element iconbox mới cho flatsome theme

Đoạn code trên nhằm tạo ra 1 element iconbox mới. Bây giờ trong trình ux_builder đã xuất hiện 1 element mang tên iSures iCon Box.

Để ý từ dòng code 34 đến 62 đây là chỗ để ae nhúng thêm icon từ fontawesome.

Cách nhúng như nào.? rất đơn giản thôi.

B1: Truy cập vào fontawesome.com

B2: Tìm icon ưa thích

Search icon fontawesome
Search icon fontawesome

Sau khi tìm được icon ưa thích click vào và copy class như hình dưới

Copy class icon
Copy class icon

B3: với cấu trúc ‘fas fa-users‘ => ‘iSures Users‘,

Key là đoạn in nghiêng ( = với class bạn vừa copy ở bước trên)

Value thích đặt gì đặt.

Úi dồi ôi, quá ngon. Vào uxbuilder để xem chúng ta có gì rồi.?

Hiển thị shortcode iconbox ra frontend.

Oke rồi đấy. Bây giờ thêm 1 tí css làm đẹp cho nó ha.

Full code bỏ vào function.php childtheme.

Yeah. Chúc ae thành công ha. Thất bại thì cũng nhắn 1 tiếng mình biết với nhé 🙂

Nguồn: https://thietkewebgiarehcm.com/tao-element-iconbox-voi-tuy-chon-icon-la-fontawesome

Trả lời

Google Ads Bảng giá Lý do nên chọn chúng tôi ? Quy trình quảng cáo Liên hệ nhận báo giá