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.
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
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">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>,…
<li><a href="#"><i class="fa fa-wordpress"></i> WordPress </a></li>
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
<i class="fa fa-wordpress fa-lg"></i> fa-lg<i class="fa fa-wordpress fa-2x"></i> fa-2x<i class="fa fa-wordpress fa-4x"></i> fa-4x<i class="fa fa-wordpress fa-3x"></i> fa-3x<i class="fa fa-wordpress fa-5x"></i> 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!.
--- Trumcode ---
Không có nhận xét nào:
Đăng nhận xét