Hướng dẫn sử dụng Font Awesome icons trong Blogspot

Font Icons đã trở thành một thành phần không thể thiếu của mọi trang web. Bởi tính đa năng và tiện dụng của chúng, bạn không cần phải ngồi hàng giờ để thiết kế icon trên photoshop, làm việc với icon font đơn giản hơn thế nhiều.

Và ở bài viết này tôi sẽ giới thiệu cho bạn cách chèn Font Awesome icons vào Blogspot.

Như đã hứa ở bài viết Hướng dẫn thiết kế template Blogspot. Trong lúc chờ phần hai của bài viết tôi sẽ giới thiệu cho các bạn vài thủ thuật trong Blogspot. Mở đầu là sử dụng Font Icons trong Blogspot. Ở bài này tôi sẽ sử dụng Font Awesome – một bộ font icon rất phổ biến với hơn 400 icons.

1. Cài Đặt Font Awesome

  • Vào Blogger Dashboard -> Template -> Edit HTML
  • Tìm đến thẻ <head>
  • Chèn đoạn code dưới đây vào trong
Tôi khuyên các bạn sử dụng BootstrapCDN để tiết kiệm băng thông và tăng tốc tải trang. Ngoài ra bạn vẫn có thể xem các cách sử dụng khác trên trang chủ của Font Awesome.

2. Sử Dụng Icons Font

  • Vào trang Icons của Font Awesome
  • Click vào Icon bạn muốn chọn. Bạn sẽ được cấp một đoạn code như thế này
  • Bây giờ bạn chỉ cần chèn đoạn code vào các thẻ như <p>, <li>, <a>,…
Lưu ý: Bạn có thể tăng kích cỡ Icons bằng cách chèn thêm code fa-lg, fa-2x, fa-3x, fa-4x, fa-5x

3. Tùy Chỉnh Icon

  • Công việc này chắc không có gì khó khăn vì mỗi icon đều có class riêng bạn chỉ cần nắm được CSS Selector là có thể chỉnh sữa dễ dàng.
Công việc chèn Font Icons vào trong Blogspot không quá khó khăn phải không? Bạn có thể áp dụng cách này cho nhiều bộ Font Icons khác. Với một chút kiến thức HTML và CSS, bạn sẽ làm cho giao diện trang web chuyên nghiệp và tối ưu hơn. Chúc các bạn thành công!.

Bài Viết Liên Quan:

admin

Chào các bạn! Tôi viết blog này với một mục đích đơn giản thôi: Trong quá trình học tập và làm việc ta gặp rất nhiều kiến thức hay ho mà chắc chắn không thể nào nhớ hết, để sau này gặp lại không phải tìm hiểu lại từ đầu, vì vậy blog này như một ghi chú những gì tôi đọc thấy hay, thấy hữu ích. Chúc mọi người có thể tìm thấy gì đó hữu ích cho mình từ đây. Thank for reading :)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *