Labels

[Blogger] Hướng dẫn sử dụng Font Awesome 4 với CSS (phần 2)


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;
}

See the Pen Demo by Hoàng Văn Hưng (@hoanghung96cs) on CodePen.

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;
}

See the Pen Font-Awesome CSS by Hoàng Văn Hưng (@hoanghung96cs) on CodePen.

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
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • 1