Đăng nhập

Tích hợp Font Awesome Icons vào lập trình theme WordPress

  • 28/01/2015 - 6:53 AM
  • 1980 Views

Nếu bạn muốn lập trình theme WordPress mà không cần đến icon hình ảnh thì bài viết này hướng dẫn các bạn cách làm như vậy. Font Awesome là một công cụ tuyệt vời để bạn tạo giao diện website, có hơn 400 icon cho bạn lựa chọn, chỉ cần tích hợp css và font vào là sử dụng, không cần đến javascript hoặc những cái gì cao siêu.

tich-hop-font-awesome-vao-lap-trinh-theme-wordpress-1

Tích hợp Font Awesome Icons vào lập trình theme WordPress

Trong bài viết hôm trước mình đã hướng dẫn cho bạn cách tích hợp Bootstrap vào WordPress, tuy nhiên với Bootstrap thì bộ icon hỗ trợ kèm theo chưa đầy đủ lắm. Công việc tích hợp Font Awesome cũng tương tự như vậy, bạn chỉ cần tải bộ font và css về, sau đó giải nén và đính kèm vào giao diện của WordPress để sử dụng.

Sau khi tải tập tin về máy tính, bạn giải nén và đổi tên thư mục thành font-awesome, tiếp đến copy nguyên thư mục này bỏ vào giao diện của bạn, sử dụng hàm sau để tích hợp Font Awesome Icons.

function add_font_awesome() { 
     wp_register_style('font-awesome-style', get_template_directory_uri() . '/lib/font-awesome/css/font-awesome.min.css');
     wp_enqueue_style('font-awesome-style');
}
add_action('wp_enqueue_scripts', 'add_font_awesome');

Nhớ là thay đổi đường dẫn cho phù hợp với tập tin trong giao diện. Sau khi hoàn thành xong thì bạn đã có thể sử dụng font một cách thoải mái. Cách sử dụng cũng cực kỳ dễ, bạn chỉ cần tìm icon ưng ý và sử dụng lại theo cú pháp sau:

<i class="fa fa-wordpress"></i>

Xem thêm danh sách tất cả các icon hiện có của Font Awesome trên trang Font Awesome Icons.

tich-hop-font-awesome-vao-lap-trinh-theme-wordpress-2

Tích hợp Font Awesome Icons vào lập trình theme WordPress

Ngoài cách sử dụng trên, bạn có thể chỉnh sửa thuộc tính của css, nếu như các chức năng bạn không thêm được HTML code giống như ví dụ bên trên thì bạn áp dụng phương pháp này:

a.button-send:before {
     font-family: 'FontAwesome';
     content: "\f1d9";
}

Rất đơn giản và dễ sử dụng đúng không nào. Thiết kế web theo phong cách hiện đại là phải gọn nhẹ và chạy nhanh, nếu giao diện bạn không có dùng hình ảnh thì dĩ nhiên sẽ chạy nhanh hơn so với giao diện có nhiều hình ảnh, đặc biệt là những hình nền có kích thước lớn.

Chúc bạn thành công!