Sau đây mình xin hướng dẫn sử dụng Font Awesome một cách đơn giản nhất mà bất cứ ai cũng có thể làm được.
Đầu tiên các bạn cần biết font awesome là gì ?
Font Awesome là thư viện cung cấp hàng trăm Icons cho Website hoặc Blog. Với những Icons này bạn hoàn toàn có thể tùy biến bằng CSS từ màu sắc, hiệu ứng,…giống như một kí tự bình thường. Ưu điểm của Font Awesome là không ảnh hưởng đến tốc độ tải trang, miễn phí,…Do đó, bạn hoàn toàn có thể sử dụng cho Blog hay Website của mình.
Cách sử dụng font awesome như thế nào ?
Bạn có thể sử dụng file trực tiếp bằng cách dán đoạn mã bên dưới vào phần <head> của HTML của trang web:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Hoặc vào đây tải font về và tích hợp vào web của bạn: ví dụ link web của mình là:
<link rel="stylesheet" href="'http://doannguyenit.com/wp-content/themes/chuyenha/lib/font-awesome/css/font-awesome.min.css">
Lưu ý: Nhớ là thay đổi đường dẫn cho phù hợp với tập tin trong giao diện.
Các bạn có thể xem các đoạn mã icon tại trang chủ Font Awesome
Để sử dụng các Icons bạn chèn các đoạn mã Icons theo mẫu sau:
<i class="fa fa-camera-retro"></i>
Không nhất thiết sử dụng thẻ <i> các bạn có thể sử dụng div,b,p … miễn sao có class=”fa Mã icon” vào là được. Vào đây để xem thêm ví dụ.
Mình muốn chèn icon bằng css thì làm như thế nào ?
Việc này quá đơn giản, chỉ cần truy cập vào trang Font Awesome Cheatsheet và tìm mã icon mình cần.
Ví dụ: fa-adn []
div:before{font-family: 'FontAwesome';content: '\ f170';}
Thay  thành \ là có thể sử dụng được ngay rồi. Đơn giản phải không nào ^^
Sử dụng Font Awesome có ảnh hưởng đến tốc độ truy cập vào web?
Các bạn thử nghĩ xem thay vì load các bước ảnh nặng nề và mất công ngồi viết css thêm icon vào , chúng ta chỉ cần dùng 1 đoạn mã có sẵn của Font Awesome là có thể dùng ngày rồi.
Nếu có bất kì thắc mắc nào các bạn có thể comment dưới bài viết hoặc gửi mail cho mình nhé!
Nguồn: doannguyenit.com
0 comments:
Post a Comment