Icont Font hiện nay được sử dụng khá rộng rãi bởi các developer trong các theme dành cho WordPress cũng như thiết kế web. Icon Font là tập hợp các vector icon có thể dễ dàng tùy biến về kích cỡ – size, màu sắc – color và nhiều điều khác chỉ với những đoạn mã CSS đơn giản.
Một số Icont Font thông dụng có thể nêu ra như:
- Font Awesome: được sử dụng rộng rãi nhất hiện nay
- Genericons: phát triển vởi Automatics – công ty mẹ của WordPress.com – tích hợp sẵn trong code WordPress
- IcoMoon
- Foundation
- Fontello: nơi bạn tự xây dựng chính Icon Font của mình từ các Icon Font có sẵn đã kể trên
Mình sẽ hướng dẫn tích hợp và sử dụng Font Awesome trong Genesis một cách chi tiết nhất có thể được ;). Quy trình để tích hợp và sử dụng Font Awesome trong Genesis như sau:
1. Tích hợp – load Font Awesome vào Genesis framework child theme:
2. Sử dụng Font Awesome:
- Sử dụng Font Awesome thông qua class thông thường
- Tạo shortcode để sử dụng Font Awesome dễ dàng trong Genesis
Bắt đầu bắt tay để thực hiện Tích hợp – load Font Awesome vào Genesis framework child theme nào:
Tích hợp trực tiếp:
Với cách này thì WordPress sẽ sử dụng trực tiếp Font Awesome được load trực tiếp từ ngày từ hosting của bạn đang sử dụng. Với cách này thì bạn hoàn toàn chủ động trong việc chỉnh sửa tập tin css của nó ngay trên hosting thay vì sử dụng gián tiếp.
Để tích hợp vào Genesis theo cách này thì bạn cần phải tải bản Font Awesome mới nhất là 4.0.3 (link tải tại đây).
Sau khi đã tải xong bạn giải nén thư mục chứa Font Awesome vào Genesis child theme mà bạn đang sử dụng.
Tiếp theo là bạn mở tập tin functions.php
trong Genesis child theme đang sử dụng bổ sung thêm đoạn mã sau:
https://gist.github.com/nhatdongnguyen/3fff7b7af862a854986c
Tích hợp gián tiếp Font Awesome vào Genesis cực dễ dàng:
Với cách này thì bạn sử dụng Font Awesome thông qua server của chính em nó Bootstrap – cách này được khá nhiều người sử dụng vì cái tiết kiếm băng thông – loading internal script 🙂 Chỉ với đoạn mã dưới đây bổ sung vào tập tin functions.php
trong Genesis child theme bạn đang sử dụng thế là ta đã tích hợp được rồi đấy (Nhanh – Gọn – Nhẹ – Tôi thích =))
https://gist.github.com/nhatdongnguyen/3d4704c26245b5df6f80
Và đây là thành quả sau khi đã tích hợp:
May mắn quá, ta đi được nửa con đường tích hợp Font Awesome vào Genesis rồi 🙂 Nhưng… bài viết cũng dài rồi, hẹn bạn vào bài viết sau với hướng dẫn sử dụng Font Awesome trong Genesis nha.
Cam nang Du lich Dalat says
Mình cũng làm cái thứ 2 ngay và luôn đây, hi vọng sẽ được như ý. Cám ơn Đông
Nguyễn Nhật Đông says
Như ý rồi chứ hè 🙂
NgocPD@FPT says
ak. Cho em hỏi thêm cái footer của anh làm thế nao ạ. em nhìn nó mơ mộng quá , ANh có thể viết bài hướng dẫn được không ạ
Nguyễn Nhật Đông says
Cái footer mình chỉ thêm cái background vào thôi!
Bạn có thể dễ dàng thực hiện nó mà 😀
NgocPD@FPT says
ANh ơi. Cái này dùng để làm gì ạ. Có phải khi tích hợp vào nó có icon nhỏ trên menu như bên blog của anh tohaitrieu.net ấy ạ ? EM đang tìm cái ý. Nếu có gì không phải mong anh thứ lỗi em nhé 😀
Nguyễn Nhật Đông says
Chính nó đó cưng!
Không biết Triều sử dụng plugin hay tích hợp như mình!!!
Giải pháp là liên hệ Triều cho nó nhanh – gọn – lẹ :V
Xét nghiệm ADN says
Cách thứ 2 hay quá, mình sẽ giảm bớt đi plugin Font Awesome mà còn tiết kiệm được băng thông, bảo đảm luôn có bản mới nhất nữa chứ.