Vấn đề đặt ra khi sử dụng các icon để trang trí bài viết và giao diện đó là làm sao để thiết kế bắt mắt nhưng vẫn giữ được tốc độ load trang nhanh. Nếu thêm quá nhiều hình ảnh thì tốc độ tải trang sẽ tăng lên đáng kể, điều đó sẽ làm cho website của bạn có thể bị tụt hạng trong kết quả tìm kiếm của google. Và mình đã chọn Font Awesome như một giải pháp thay thế.
Để sử dụng Font Awesome cho blogspot, chỉ cần chèn đoạn mã phía dưới trước thẻ
</head>
Thêm dòng này vào bên trên:
- Chọn icon cần thiển thị (danh sách icon có rất nhiều icon cho bạn lựa chọn)
- Ví dụ để hiển thị icon: Icon camera-retro chỉ cần thêm <i class="fa fa-camera-retro"></i>
- Thay đổi kích thước icon thêm fa-lg, fa-2x, fa-3x, fa-4x, fa-5x Ví dụ :
Các bạn không nhất thiết là phải sử dụng thẻ i có thể sử dụng thẻ b, p, div, table…. miễn là phải có class=”fa fa-xxxx fa-size” trong đó fa-xxxx là tên icon Font Awesome fa-size là kích cỡ. Ngoài ra các bạn cũng có thể quay dọc, quay ngang, quay tùm lum icon tùy ý của bạn bằng cách sử dụng thêm class fa-rotate-90 vào sau. Số 90 có thể thay bằng 180, 270…
TÔI CÓ THỂ XEM THÊM VÍ DỤ VỀ ICON FONT AWESOME Ở ĐÂU?
Các bạn có thể xem thêm ví dụ về Font Awesome tại đây
LÀM SAO ĐỂ BIẾT CÁC MÃ ICON TÔI MUỐN DÙNG?
Đơn giản lắm. Các bạn chỉ cần truy cập vào trang Font Awesome Cheatsheetvà tìm mã của icon mình muốn dùng.
Mẹo nhỏ: Hãy truy cập vào trang Font Awesome CheatSheet bên trên và nhấn ctrl+f sau đó gõ thử một vài icon mà bạn vẫn thấy như downlad, clock, calendar… để tìm icon mong muốn
Mẹo nhỏ: Hãy truy cập vào trang Font Awesome CheatSheet bên trên và nhấn ctrl+f sau đó gõ thử một vài icon mà bạn vẫn thấy như downlad, clock, calendar… để tìm icon mong muốn
SỬ DỤNG FONT AWESOME CÓ ẢNH HƯỞNG ĐẾN TỐC ĐỘ TẢI TRANG WEB?
Tất nhiên là có nhưng nó sẽ giảm thiểu tối đa kích cỡ trang của bạn. Thay vì load những hình ảnh nặng nề và mất công ngồi viết css thêm icon và tính toán thì các bạn có Font Awesome để ăn sẵn rồi 
Để thực tế hơn chúng ta sẽ cùng sử dụng công cụ kiểm tra tốc độ trang làTools.Pingdom.Com để kiểm tra tốc độ trang web.
Mình thiết lập phần test trên tools.pingdom.com lấy server là New York City và sau khi kiểm tra thì website đạt điểm 87/100(một mức điểm khá cao) so với một theme mà mình kiểm tra trước đó thì chỉ chậm hơn 2 điểm tức là trước đây mình đã thử một theme khác và đạt 89/100.
Để thực tế hơn chúng ta sẽ cùng sử dụng công cụ kiểm tra tốc độ trang làTools.Pingdom.Com để kiểm tra tốc độ trang web.
Mình thiết lập phần test trên tools.pingdom.com lấy server là New York City và sau khi kiểm tra thì website đạt điểm 87/100(một mức điểm khá cao) so với một theme mà mình kiểm tra trước đó thì chỉ chậm hơn 2 điểm tức là trước đây mình đã thử một theme khác và đạt 89/100.
Kiểm tra tất cả các thông số sau khi test thì khi sử dụng Font Awesome blog của mình phải tải thêm 2 file là font-awesome.css và fontawesome-webfont.woff?v=4.0.3 với kích cỡ lần lượt là 5.2kb và 43.9kb như vậy cũng không phải quá nặng nề đúng không nào?
Đăng nhận xét