Thiết kế giao diện cho WordPress với Font Awesome cực bắt mắt

September 30, 2014 Lập Trình WordPress No comments

Nếu bạn muốn thiết kế giao diện WordPress mà không cần đến hình ảnh thì bài viết này mình sẽ hướng dẫn cho 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.

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.

function add_font_awesome() {<br />
    wp_register_style(‘font-awesome-style’, get_template_directory_uri() . ‘/lib/font-awesome/css/font-awesome.min.css’);<br />
    wp_enqueue_style(‘font-awesome-style’);<br />
}<br />
add_action(‘wp_enqueue_scripts’, ‘add_font_awesome’);

functionadd_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>

1	<iclass=“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.

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 {<br />
    font-family: ‘FontAwesome';<br />
    content: “f1d9″;<br />
}

a.button–send:before{

font–family:‘FontAwesome’;

content:“f1d9″;

}

Rất đơn giản và dễ sử dụng phải không nào. Thiết kế website 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.