CSS-CSS3


Home / Tài liệu CNTT / CSS-CSS3 / Sử dụng font Awesome css các icon đẹp cho web WordPress

Sử dụng font Awesome css các icon đẹp cho web WordPress

Nếu bạn làm Front end thường xuyên css thì font Awesome có thể đã quá quen thuộc với bạn, với việc cung cấp số lượng icon lớn gần như rất đầy đủ cho bạn sử dụng mà không cần nhờ đến thiết kế. Dưới đây là một vài thông tin giúp bạn biết các sử dụng font Awesome.

Font Awesome liên tục cập nhật các phiên bản để tăng số lượng icon mỗi phiên bản đều có bản Pro (Trả phí) và  bản MIỄN PHÍ sẽ giới hạn icon, tuy nhiên với bản miễn phí bạn cũng sử dụng rất thoải mái rồi. Vì vậy hướng dẫn này sẽ tập trung vào phiên bản MIỄN PHÍ.

Để sử dụng icon Free Font Awesome, bạn có thể chọn tải xuống thư viện Font Awesome hoặc bạn có thể đăng ký tài khoản tại Font Awesome và nhận mã (gọi là KIT CODE) để sử dụng khi bạn thêm Font Awesome vào web của mình trang.

Chúng tôi thích phương pháp KIT CODE hơn. Sau khi nhận được mã, bạn có thể bắt đầu sử dụng Font Awesome trên các trang web của mình bằng cách chỉ bao gồm một dòng mã HTML:

Dưới đây là ví dụ mình sử dụng Font Awesome phiên bản 5.0 sử dụng KIT CODE

Bạn có thể tải phiên bản Font Awesome mới nhất tại đây: https://fontawesome.com/download và đọc tài liệu hướng dẫn sử dụng các icon

Cách đưa Font Awsome vào WordPress

Cách 1: nhúng link trực tiếp của font vào website

Bạn chỉ cần đưa liên kết gọi font từ máy chủ Awesome vào web, sao chép code bên dưới rồi dán vào file header.php trong thư mục theme mà bạn đang sử dụng. Nhớ dán nó nằm trong thẻ <head>.

Với cách 1 này, website của bạn sẻ không phải tốn dung lượng để lưu trữ font, tuy nhiên với việc font chữ sử dụng máy chủ nước ngoài nên việc tải font sẽ phụ thuộc vào điều kiện internet kết nối quốc tế (đứt cáp sẽ ảnh hưởng tới tốc độ website rất nhiều).

Cách 2: Tải font về máy rồi up lên host để sử dụng

Bạn truy cập vào đây để tải font chữ này về (Font for Web).

Sau khi tải về và giải nén ra, bạn sẽ có các thư mục như trên. Xóa hết tất cả các file và thư mục, chỉ dữ lại 2 thư mục được khoanh vùng màu đỏ như hình (css, webfonts).

Truy cập vào VPS hay Hosting của bạn, vào thư mục theme mà bạn đang sử dụng, tạo cho mình thư mục có tên là “font-icon” Tải 2 thư mục như hình trên vào thư mục mà bạn vừa tạo.

Tiếp theo, bạn sao chép code bên dưới rồi dán vào file header.php trong thư mục theme mà bạn đang sử dụng. Nhớ dán nó nằm trong thẻ <head>.

Mục Lục