Hướng dẫn sử dụng font Awesome
Font Awesome là bộ font hình biểu tượng (icon) dạng vector được sử dụng rộng rãi cho các ứng dụng web. Trước khi có font Awesome, mỗi khi muốn hiển thị một hình icon minh họa, người viết web phải sử dụng một file hình ảnh. Việc này rất mất thời gian, vì phải tạo ra hình ảnh, rồi chỉnh CSS để hình ảnh hiển thị đúng ý, ngoài ra, nếu muốn thay đổi kích thước hiển thị thường phải tạo một hình ảnh khác, chưa kể đến việc người viết web chỉ biết mã HTML, CSS, JS mà không biết thiết kế đồ họa.
Sử dụng font Awesome, bạn có hơn 519 (tùy phiên bản) icon có thể sử dụng, bạn cũng có thể dễ dàng thay đổi kích thước, tạo hiệu ứng bóng đổ,… chỉ cần CSS và HTML mà vẫn hiển thị đẹp mắt trên nhiều trình duyệt hiện đại và thiết bị có độ phân giản cao.
Font Awesome cũng có nhược điểm là chúng là font nên các icon chỉ hiển thị đơn sắc. Bạn có thể cho chúng hiển thị màu đỏ, xanh,… gì cũng được, nhưng mỗi icon chỉ có một màu đó mà thôi. Cũng có thể icon bạn yêu cầu chưa có trong font. Nếu hình minh họa yêu cần phải có nhiều màu sắc hoặc hình icon chưa có, thì bạn vẫn phải dùng hình ảnh. Tuy nhiên, nhu cầu này cũng ít, và font Awesome có thể đáp ứng được hầu hết nhu cầu của bạn.
Cài đặt
Font Awesome được cung cấp miễn phí. Bạn có thể cài đặt sử dụng font cho website của mình bằng một trong hai cách sau:
Sử dụng MaxCDN
Bạn chỉ cần đặt đoạn mã sau vào phần head của trang HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">Nhớ thay 4.3.0 bằng phiên bản mong muốn. Bạn có thể vào trang chủ dự án font Awesome để xem phiên bản mới nhất là bao nhiêu.
Sử dụng MaxCND, bạn không phải tự host bộ font, tiết kiệm được một ít băng thông cho host.
Tự host
Nếu thích tự host, bạn tải về bộ font tại trang chủ dự án font Awesome, giải nén rồi upload lên một thư mục nào đó của ứng dụng web. Sau đó, thêm đoạn mã sau vào phần head của trang HTML:
<link rel="stylesheet" href="đường dẫn đến thư mục font awesome/css/font-awesome.min.css">IE7
Phiên bản mới của font Awesome không hỗ trợ IE7, nếu bạn cần hỗ trợ IE7, bạn phải tự host font Awesome phiên bản 3.2.1 rồi tự host. Sau đó, thêm đoạn mã sau vào phân head của trang HTML:
<link rel="stylesheet" href="đường dẫn đến thư mục font awesome/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="đường dẫn đến thư mục font awesome/css/font-awesome-ie7.min.css">
<![endif]-->Sử dụng
Trang http://fortawesome.github.io/Font-Awesome/icons/ liệt kê tất cả các icon và tên lớp CSS tương ứng. Muốn hiện icon nào, bạn hãy vào đây tìm tên lớp CSS của nó. Ví dụ, nếu muốn hiện hình máy ảnh, hãy tìm trong trang, bạn sẽ thấy dòng sau:
Như vậy, tên lớp CSS là camera.
Trong phần body trang HTML, nếu muốn hiển thị icon, bạn dùng bất kỳ thẻ gì cũng được (nhưng nên là những thẻ như span, i,…) miễn đặt class CSS của nó là fa fa-tên_lớp_CSS_của_icon. Ví dụ trường hợp của icon camera, sẽ viết mã như sau:
<i class="fa fa-camera"></i>Thay đổi kích thước icon
Bạn có thể thay đổi kích thước icon bằng 2 cách:
- Cách linh hoạt nhất, bạn đặt font-size cho thẻ hiện icon hoặc thẻ chứa thẻ icon. Ví dụ:
<i class="fa fa-camera" style="font-size:16px;"></i>Hoặc:
<span style="font-size:16px;"><i class="fa fa-camera"></i></span> - Cách ít linh hoạt hơn, bạn sử dụng thêm lớp CSS đã định nghĩa sẵn của bộ font, như sau:
- fa-lg: tăng 33% kích thước so với kích thước font được quy định ở thẻ chứa icon
- fa-2x: tăng gấp đôi kích thước so với kích thước font được quy định ở thẻ chứa icon
- fa-3x: tăng gấp 3
- fa-4x: tăng gấp 4
- fa-5x: tăng gấp 5
Ví dụ:
Tăng 33%:<i class="fa fa-camera fa-lg"></i>Tăng 5 lần:
<i class="fa fa-camera fa-5x"></i>
Cố định chiều ngang (Fixed Width Icons)
Thông thường, các ký tự có độ dài không giống nhau, ví dụ i và m, rõ ràng chiều ngang chữ m dài hơn i. Font Awesome cũng vậy, các icon không bằng nhau chiều ngang. Nếu bạn đang làm một menu chẳng hạn, bạn sẽ muốn các icon bằng chiều ngang với nhau. Trong trường hợp này, bạn sử dụng thêm lớp fa-fw. Chú ý: nếu bạn dùng font Awesome phiên bản trước 4.0 nhưng sau 3.1.1, thay vì dùng lớp fa-fw, bạn phải dùng icon-fixed-width.
Ví dụ: nếu sử dụng đoạn HTML sau:
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-arrows-v"></i> Arrow</a>
<a class="list-group-item" href="#"><i class="fa fa-bicycle"></i> Bicycle</a>
<a class="list-group-item" href="#"><i class="fa fa-flash"></i> Flash</a>
</div>Thì sẽ xuất hiện menu như hình:
Nếu sử dụng 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-arrows-v fa-fw"></i> Arrow</a>
<a class="list-group-item" href="#"><i class="fa fa-bicycle fa-fw"></i> Bicycle</a>
<a class="list-group-item" href="#"><i class="fa fa-flash fa-fw"></i> Flash</a>
</div>Thì sẽ xuất hiện menu như hình:
Bullets danh sách
Danh sách unordered list mặc định hiển thị các dấu chấm cho mỗi mục trong danh sách. Nếu muốn thay đổi, sử dụng fa-ul cho thẻ ul và fa-li cho từng li. Ví dụ:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Item 1</li>
<li><i class="fa-li fa fa-check-square"></i>Item 2</li>
<li><i class="fa-li fa fa-square"></i>Item 3</li>
<li><i class="fa-li fa fa-square"></i>Item 4</li>
</ul>Sẽ hiển thị danh sách sau:
Icon động
Bạn hãy sử dụng các lớp fa-spin, fa-pulse để cho các icon xoay động (không hỗ trợ IE8, IE9). Ví dụ, hãy tự thử đoạn mã sau:
<i class="fa fa-camera fa-spin"></i>
<i class="fa fa-home fa-pulse"></i>
<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>Xoay icon
Dưới đây là các lớp và hiệu ứng xoay tương ứng:
Trên đây là những cách dùng thông dụng, ngoài ra, vẫn còn một số cách dùng khác, bạn hãy tham khảo thêm tại đây http://fortawesome.github.io/Font-Awesome/examples/.
Nguồn tham khảo: http://fortawesome.github.io/Font-Awesome/
bài viết khá bổ ích cảm ơn bạn nhé, http://quangcaotrenmang.vn/