Hướng dẫn cách sử dụng Font Awesome Icons trong Blogspot - Tha hồ sử dụng icon cho Website.
Font icons với sự đa năng và tiện dụng của chúng, chắc chắn sẽ không thể thiếu đối với một wap/webmaster thích chăm chút và làm đẹp cho website của mình. Nếu như trước đây, bạn phải mất hàng giờ để design hay tìm kiếm một icon phù hợp để sử dụng, thì bây giờ các bộ Font icons sẽ khiến việc đó trở nên dễ dàng hơn.
Hôm nay Lê Công Hậu Blog xin chia sẻ cách sử dụng Font Awesome, hiện đang ở phiên bản 4.2.0 với 479 icon đẹp, độc đáo cho Blogspot ( Blogger ) và áp dụng bất cứ mã nguồn mở nào khác.
Cách sử dụng Font Awesome Icons trong Blogspot
1/ Cài đặt Font Awesome cho Blogspot:
- Vào Blogspot → Bảng điều khiển → Mẫu → Chỉnh sửa HTML.
- Tìm đến thẻ <head>
- Chèn đoạn mã sau đây vào dưới nó.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
2/ Cách sử dụng Font icons:
- Vào trang icons của Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
Hơn 400 icon đẹp độc đáo
- Lựa chọn và click vào một icon nào đó. Bạn sẽ được cung cấp một đoạn mã tương tự như sau:
<i class="fa fa-thumbs-o-up"></i>
- Bây giờ bạn có thể copy và dán nó ở bất cứ đâu trên website, nơi mà bạn muốn nó hiển thị. Ví dụ mình muốn đặt icon này trước chữ Blogspot:<i class="fa fa-thumbs-o-up"></i> Blogspot
3/ Một số cách tùy chỉnh icons:
+ Tăng kích cỡ icons: Bạn có thể tăng giảm kích thước của một icon bất kỳ bằng cách thêm vào đoạn mã các ký tự ( fa-lg, fa-2x, fa-3x, fa-4x, fa-5x ).
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
+ Xoay, đảo ngược icons: Cũng với cách kết hợp những đoãn mã lại với nhau, bạn dễ dàng tùy chỉnh được các hướng của một icon như xoay 90° 180° 270° hoặc đảo ngược lên xuống.
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
+ Cố định chiều rộng giữa nhiều icon: Trong trường hợp bạn sử dụng nhiều icon, kết hợp lại với nhau để tạo một danh sách menu, nhưng giữa các icon có chiều rộng không tương đồng sẽ không chiều lòng được các designer có cặp mắt tinh tế. Vì thế Font Awesome cũng cung cấp một cách cố định chiều rộng giữa nhiều icon bằng cách thêm đoạn mã fa-fw.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
Bên trên là cách sử dụng và một số tùy chỉnh icon trong bộ Font Awesome, nếu bạn có một chút kiến thức về HTML và CSS thì việc sử dụng nó và kết hợp vào nhiều bộ Font icons khác sẽ làm cho giao diện Website chuyên nghiệp hơn. Mong rằng nó có ích và chúc các bạn thành công!
