Labels

[Blogger] Hướng dẫn sử dụng Font Awesome 4

Font Awesome hiểu đơn giản là những icon nhỏ được tạo ra để giúp trang trí thêm vào thanh menu, label hay bất kì nào ta muốn. Tại blog của mình bạn có thể bắt gặp nó ngay ở thanh menu đầu tiên

Xem live demo một mẫu icon

See the Pen Font Awesome by Hoàng Văn Hưng (@hoanghung96cs) on CodePen.
Để thực hiện nó ta sẽ làm như sau
  • Trước hết bạn đăng nhập vào blogger chọn Mẫu và vào phần chỉnh sửa html
  • Ở đây bạn Crtl F và tìm với từ khóa font-awesome mục đích là tìm xem đã có đoạn css nhúng vào chưa vì hầu hết template đều đã có nhúng nhưng chưa phải version mới nhất


Nếu tìm thấy đoạn link file css đó mà phiên bản của nó chưa phải là mới nhất thì bạn ẩn đoạn đó đi và thay thế bằng đoạn mới nhất để được hỗ trợ thư viện font đầy đủ, phiên bản mới nhất là 4.7.0

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Sau đó hãy lưu lại mẫu

<i class="fa ..."></i>
Trong đó dấu ... là mã icon mà bạn đã chọn ở thư viện font. Ví dụ

<i class="fa fa-address-book"></i>

Để thêm hiệu ứng quay tròn ta thêm đoạn fa-spin ngay sau ví dụ

<i class="fa fa-address-book fa-spin"></i>

Nếu như đặt nó ở thanh menu thì bạn hầu như không cần chỉnh css nhiều vì template đã định dạng sẵn chỉ cần đặt vào nó sẽ tuân theo

Để xem thêm ví dụ thì trang chủ cũng có hướng dẫn từ bạn tham khảo tại https://fontawesome.com/v4.7.0/examples

Chúc các bạn thành công
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