Xem live demo một mẫu icon
Để 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
- Truy cập thư viện font https://fontawesome.com/v4.7.0/cheatsheet
- Tìm vị trí bạn muốn đặt icon và thêm đoạn code như sau lưu ý dấu cách
<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
