Chào các bạn, ở bài viết trước mình có đề cập cách dùng fontawesome trong html, ở bài viết này chúng ta sẽ biết được cách dùng fontawesome trong định dạng css. Trường hợp này thường được sử dụng để định dạng cho 1 lớp các đối tượng có cùng thuộc tính ví dụ như menu cấp 2 khi drop-down, hoặc 1 chuỗi các thẻ danh sách không thứ tự.
Trước tiên bạn hay chắc chắn là đã nhúng link font-awesome vào web của mình nhé
- Chọn Mẫu > chỉnh sửa HTML
- Ctrl F và gõ vào font-awesome
Nếu bạn đang dùng ver cũ hơn thì có thể thay ver mới vào, ver mới sẽ hỗ trợ nhiều icon đẹp . Ver hiện tại là 4.7.0
Thay hoặc thêm link sau để có thể sử dụng được fontawesome ( đặt trong cặp thẻ <head> )
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Để sử dụng fontawesome trong css ta dùng 2 thuộc tính sau
content:"\f...";
font-family:fontawesome;
Trong đó content bao chứa phần nội dung của font. Bạn tiến hành tra nó tại đây
Phần mình khoanh đỏ chính là nội dung content. Việc đặt fontawesome vào vị trí nào đòi hỏi bạn phải có kiến thức chắc về html và css. Ví dụ ở đây mình sẽ đặt nó ở trước mỗi thẻ li (tức là ul li:before )
ul li:before{
content:"\f2b9 ";
font-family:fontawesome;
}
1 ví dụ khác khi hover vào menu cấp 2 thì fontawesome sẽ xuất hiện
nav li li:hover a:before{
content:"\f061";
font-family:fontawesome;
font-size:12px;
}
Chủ yếu ta hay dùng nó để đặt trước một thẻ nào đó trong html ví dụ như ul li a:before (trong menu), ul li:before (trong 1 danh sách không đánh số) hoặc bạn có thể đặt nó ở bất kì đâu bạn muốn, miễn là đảm bảo đúng nội dung
Như vậy qua bài viết này bạn có thể sử dụng FA trong css để trang trí blog của mình sinh động hơn
Chúc thành công và hẹn gặp lại ở bài viết sau
