HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 20 December 2016

[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
Comments:
Please wait while i am loading Facebook SDK js