Cách thêm font awesome vào wesbsite để có icon đẹp

Cách thêm font awesome vào wesbsite

Chào anh em nhé, congdongblog nay sẽ chia sẽ cho các bạn 1 ứng dụng hay vào website, bạn sẽ thêm được các icon hay và đẹp theo ý muốn của các bạn.

• Font awesome là gì? 

Font Awesome là một thư viện chứa các font chữ ký hiệu hay sử dụng trong website. Font chữ ký hiệu được hiểu là các icon thông dụng để thêm vào website, không phải thiết kế lưu hình ảnh cũng không phải css lại gây tốn dung lượng …

• Cách thêm font awesome 

Sẽ có nhiều cách để thêm vào website và sử dụng chúng, congdongblog sẽ hưỡng dẫn cho bạn 2 cách để bạn tham khảo sử dụng nhé

1: Cách thêm font awesome vào wesbsite bằng function.php của theme,

Các bạn cứ thêm đoạn code ở dưới để vào function.php là có thể sử dụng được nhé

function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

2: Cách thêm font awesome vào website bằng link ở header.php của theme

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

• Các sử dụng Font Awesome trong website

Sau khi các bạn add được thư viện của font awesome thì các bạn lựa các icon ưng ý để thêm vào website như các bạn muốn nhé:

Link đây là các icon của thư viện Font Awesome bạn tha hồ chọn nhé:
https://fontawesome.com/v4.7.0/icons/

Lưu ý: thẻ icon của thư viện chỉ nhận khi bạn thêm vào code của bài viết chứ không hiện ở trực quan cho bạn đâu. 

Ví dụ nhé: mình thêm icon thông tin cho mình đẹp hơn nhé

<i class="fa fa-address-card" aria-hidden="true"></i> Cộng đồng blog

Kết Quả : cộng đồng blog

• CSS icon Font Awesome before and after.

Nhiều anh em muốn thêm icon font awesome này vào  before và after trong trường hợp không thể nhét thẻ <i> vào được, mình hướng dẫn luôn để anh em dễ làm nhé.

Link bài hướng dẫn thêm before after trực quan hơn

Cách Thêm Font Awesome vào Before và after

Các bạn css như mình ở dưới nhé,

.class-cua-ban:before{
   content:"\mã icon";
   font-family: FontAwesome;
}

Lưu ý:

1. Mã icon bạn click vào icon bạn muốn ở trang https://fontawesome.com/v4.7.0/icons/.
2. Website của bạn phải chắc chắn thêm thư viện font awesome rồi , nếu chưa bạn có thể xem ở phía trên bài viết này.

xong nhé anh em, thấy hay tiếc gì 1 like nhỉ phải không anh em :p

Các bạn có gì thắc mắc cứ liên hệ với mình hoặc để lại comment bên dưới,tham gia groupcongdongblog để có nhiều tin mới hơn nhé. mình sẽ hỗ trợ hết sức, thank you mọi người nhé!