Thêm bộ icon CSS Font Awesome cho website, blog

Font Awesome được tạo ra và duy trì bởi Dave Gandy. Đây là bộ hơn 500 icon miễn phí trên định dạng SVG (định dạng này cho phép phóng to, thu nhỏ kích thước mà không bị vỡ hình) và nó dựa trên kích thước của font chữ đang hiện hành. Trong bài tôi sẽ hướng dẫn các bạn thêm bộ icon này cho web, blog của chúng ta.

Thêm bộ icon CSS Font Awesome cho website, blog
Add Font Awesome for website, blog

Thêm Font Awesome vào web

1. Thêm trực tiếp vào web, blog từ hostting của trang chủ Font Awesome. Các bạn chèn code bên dưới vào phần đầu của trang web trong thẻ <head>.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

2. Nếu các bạn có  hostting riêng hoặc thiết kế web trên localhost thì các bạn truy cập vào đây để tải phiên bản Font Awesome mới nhất về máy tính và liên kết địa chỉ tệp font-awesome.css như bước một.

Cách gọi icon Font Awesome

Để gọi các icon ra các bạn sử một thẻ html bất kì và gán nó vào thuộc tính class với giá trị fa + fa-tên icon.

Hãy xem ví dụ bên dưới:
<i class="fa fa-home"></i>
<span class="fa fa-search"></span>

Để tìm kiếm tên của các icon các bạn truy cập vào http://fortawesome.github.io/Font-Awesome/icons/ và lựa chọn nhưng mẫu icon mình muốn chèn nó vào văn bản.

Chúc các bạn thành công !

1 comment:

  1. Cảm ơn bạn đã chia sẻ thông tin.
    ............................................
    Sunpo Corporation
    Chuyên kinh doanh máy nước nóng năng lượng mặt trời – liên doanh Úc và Israel.
    Tel: 08. 3984 3985 – 0984 53 22 55
    Mail: info@sunpo.com.vn
    Click xem chi tiết: máy nước nóng năng lượng mặt trời uy tín hoặc may nuoc nong nang luong mat troi uy tin

    ReplyDelete