Sử dụng Fonts Awesome để tạo icon trang trí bài viết cho Blogspot có điểm lợi sau:
- Biểu tượng icon thiết kế: đẹp, đa dạng, đồng bộ.
- Đảm bảo được tốc độ load trang nhanh.
Theo mình các bạn cũng nên chọn Font Awesome như một giải pháp làm cho blog của bạn có thể bị tăng hạng trong kết quả tìm kiếm của google.
Cụ thể các bước làm như sau:
Bước 1: Truy cập vào trang quản trị Blog của bạn tại Blogspot.com
Bước 2: Chọn Template (Mẫu)/ Edit HTML (Chỉnh sửa HTML)
Bước 3: Copy & Paste đoạn code dưới đây vào sau thẻ <head>
Bước 4: Mở bài viết muốn chèn các biểu tượng icon từ Font Awesome, chèn đoạn code sau
Lưu ý: mở khung soạn thảo ở chế độ HTML
Một số thắc mắc, tùy chỉnh khác:
Tăng độ lớn của icon thế nào?
Bạn chỉ cần thêm các tham số fa-lg, fa-2x, fa-3x, fa-4x, fa-5x vào mã chèn icon
Không nhất thiết phải sử dụng thẻ <i> Các bạn có thể dùng thẻ <b>, <p>, <div>,
fa-camera-retro : là mã icon theo quy ước của Font Awesome
Tạo danh mục kèm theo biểu tượng icon bằng cách nào?
Bạn thêm thẻ fa-fw để tạo danh mục mang tính tổng hợp
Cách chèn icon cho một danh sách như thế nào?
Bạn dùng thẻ fa-ul và fa-li
Chèn icon đánh dấu cho đoạn văn bản
Bạn dùng thẻ fa-border và lựa chọn pull-left (chèn icon bên trái) hoặc pull-right (chèn icon bên phải)
Cách tạo icon chuyển động như thế nào?
Bạn sử dụng thẻ fa-spin để tạo hiệu ứng xoay tròn cho bất kỳ biểu tượng nào, tương tự với các thẻ khác fa-puls, fa-cog, fa-refesh
Cách đảo chiều của các icon như thế nào?
Rất đơn giản, bạn dùng thẻ fa-rotate-* hoặc fa-flip-*; cụ thể:
Tìm các mã icon của Font Awesome ở đâu?
Hãy truy cập Font Awesome Cheatsheet http://fontawesome.io/cheatsheet/ Mẹo nhỏ: Bấm Ctrl+F sau đó gõ từ khóa liên quan đến icon mà bạn tìm, ví dụ: downlad, clock, calendar… để tìm icon mong muốn
- Biểu tượng icon thiết kế: đẹp, đa dạng, đồng bộ.
- Đảm bảo được tốc độ load trang nhanh.
Theo mình các bạn cũng nên chọn Font Awesome như một giải pháp làm cho blog của bạn có thể bị tăng hạng trong kết quả tìm kiếm của google.
Cụ thể các bước làm như sau:
Bước 1: Truy cập vào trang quản trị Blog của bạn tại Blogspot.com
Bước 2: Chọn Template (Mẫu)/ Edit HTML (Chỉnh sửa HTML)
Bước 3: Copy & Paste đoạn code dưới đây vào sau thẻ <head>
PHP:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">Lưu ý: mở khung soạn thảo ở chế độ HTML
HTML:
<i class="fa fa-camera-retro"></i> fa-camera-retroMột số thắc mắc, tùy chỉnh khác:
Tăng độ lớn của icon thế nào?
Bạn chỉ cần thêm các tham số fa-lg, fa-2x, fa-3x, fa-4x, fa-5x vào mã chèn icon
PHP:
<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-5xfa-camera-retro : là mã icon theo quy ước của Font Awesome
Tạo danh mục kèm theo biểu tượng icon bằng cách nào?
Bạn thêm thẻ fa-fw để tạo danh mục mang tính tổng hợp
Mã:
<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>Bạn dùng thẻ fa-ul và fa-li
Mã:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Lerns to internet</li>
<li><i class="fa-li fa fa-check-square"></i>Save your time</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>Be healthy</li>
<li><i class="fa-li fa fa-square"></i>Discovery</li>
</ul>Bạn dùng thẻ fa-border và lựa chọn pull-left (chèn icon bên trái) hoặc pull-right (chèn icon bên phải)
Mã:
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...Cuộc sống quá ngắn cho những điều nhỏ nhen, vụn văt và những màn kịch tính, nên hãy hôn thật chậm, cười thật tươi, yêu thật chân thành và tha thứ thật nhanh.Bạn sử dụng thẻ fa-spin để tạo hiệu ứng xoay tròn cho bất kỳ biểu tượng nào, tương tự với các thẻ khác fa-puls, fa-cog, fa-refesh
PHP:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>Rất đơn giản, bạn dùng thẻ fa-rotate-* hoặc fa-flip-*; cụ thể:
PHP:
<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-verticalHãy truy cập Font Awesome Cheatsheet http://fontawesome.io/cheatsheet/ Mẹo nhỏ: Bấm Ctrl+F sau đó gõ từ khóa liên quan đến icon mà bạn tìm, ví dụ: downlad, clock, calendar… để tìm icon mong muốn
