Breaking News

Cách chèn font Awesome vào website của bạn


Trong bài viết mới nhất này, tôi xin giới thiệu một xu hướng mới nữa trong thiết kế website 2013. Đó là việc sử dụng font chữ để thay cho toàn bộ các icon trên website.

Bạn sẽ có gì khi sử dụng Font Awesome?

Lợi ích của việc thay thế này rất rõ ràng, khi sử dụng Font Awesome bạn sẽ thấy:

– Không cần mất công sức để thiết kế các icon nữa

– Giảm 1 phần đáng kể dung lượng của website

– Thay đổi rất thuận lợi, phóng to thu nhỏ và thay đổi màu sắc tùy ý

Cài đặt Font Awesome

Việc cài đặt và sử dụng Font Awesome khá đơn giản, có 2 cách thực hiện như sau:

1. Cài đặt bằng WordPress Plugin

Các bạn có thể sử dụng plugin Font Awesome Icons , download và cài đặt plugin này tại đây.

2. Cài đặt bằng tay không sử dụng plugin

Các bạn tải về bản mới nhất của Awesome Font tại đây.

Sau khi giải nén file ra, bạn có thể để nguyên folder “font-awesome-4.0.3” hoặc đổi tên cho nó, upload folder lên hosting của mình.

Ở đây mình sẽ để trên folder của theme mình đang sử dụng , đường dẫn link sẽ có dạng:<?php bloginfo('template_directory'); ?>/font-awesome-4.0.3
Việc bây giờ là làm thế nào để nhét nó vào trong <head> theme của bạn:<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Trong ví dụ cụ thể của mình nó sẽ là :<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/font-awesome-4.0.3/css/font-awesome.min.css">
– Bạn có thể chèn trực tiếp vào trong header, phần trong thẻ <head></head> của theme bạn đang dùng.
– Bạn cũng có thể sử dụng function để thực hiện thao tác này, khuyên dùng cho các framework như Genesis (Function này đầy đủ, hỗ trợ cả IE7 nhé!)
 * Registers and loads font awesome * CSS files using a CDN. * * 
@link http://www.bootstrapcdn.com/#tab_fontawesome
@author FAT Media */ add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' ); 
/** * Register the awesomeness and add IE7 support * * 
@global $wp_styles * 
@global $is_IE */ function prefix_enqueue_awesome() { global $wp_styles, $is_IE; wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css', array(), '3.2.0' ); if ( $is_IE ) { wp_enqueue_style( 'prefix-font-awesome-ie', '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome-ie7.min.css', array('prefix-font-awesome'), '3.2.0' ); 
 // Add IE conditional tags for IE 7 and older $wp_styles->add_data( 'prefix-font-awesome-ie', 'conditional', 'lte IE 7' ); } }

Sử dụng Font Awesome Icons

Với mỗi version sẽ có một dạng shortcode khác nhau, đây là danh sách icon mới nhất của Font Awesome:

Danh sách icon Font Awesome

Mẹo sử dụng:

– Tìm kiếm bằng cách search keyword tương ứng với tên icon bạn đang muốn sử dụng

– Click vào icon bất kỳ bạn sẽ có 1 đoạn mã html, bạn chỉ cần copy và chèn website của mình.

Ví dụ:<i class="fa fa-coffee"></i> khi sử dụng đoạn mã này sẽ hiển thị cho chúng ta 1 icon ly cafe

Lời kết

Font Icons đang là xu hướng của thiết kế website năm 2013, lợi ích của nó quá rõ ràng. Trong khi sử dụng, các bạn nên chú ý đên shortcode của nó để tránh nhầm lẫn vì ở mỗi version nó sẽ thay đổi khác nhau.

Chúc các bạn có một website đẹp hơn!

Không có nhận xét nào