Hướng dẫn sử dụng font awesome tạo icon cho website

Tri thức / Lập trình / Lập trình web / Html & Css      61 - 0      28 ngày trước
Hướng dẫn sử dụng font awesome tạo icon cho website
0 0

Việc chèn các biểu tượng vào website đã trở nên rất phổ biến. Có nhiều thư viện hỗ trợ với nhiều cách tiếp cận khác nhau. Font awesome là thư viện chèn icon vào website với cách tiếp cận của font chữ, nghĩa là xem các biểu tượng như các ký tự. Từ đó chúng ta có thể thay đổi màu sắc, kích thước và hiệu ứng cho icon. 

Cùng Tủ Tri Thức xem qua cách áp dụng thư viện font awesome để tạo icon cho website.

 

Tải và tích hợp thư viện font awesome

Truy cập trang web fontawesome.com và làm theo các bước như hình dưới để tải về phiên bản mới nhất

 

 

Tải và giải nén chúng ta sẽ được thư mục như hình sau:

 

 

Trong thư mục css, chúng ta có file all.css, đây là file mà chúng ta sẽ tiến hành nhúng vào file html như sau:

Tiến hành nhúng file css/all.css vào html như sau:

<head>
    <title>Sử dụng thư viện font awesome chèn icon vào website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/fontawesome/css/all.css" rel="stylesheet" type="text/css"/>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>

Lưu ý đường dẫn tới file all.css sao cho đúng với dự án hiện tại của các bạn.

 

Tạo icon bằng thư viện font awesome

Tìm kiếm icon bằng cách truy cập vào thư viện icon của font awesome như sau:

Điền tên icon theo ý muốn, nhấn vào kết quả để xem code nhúng icon như bên hình dưới:

Copy code nhúng và dán vào bất cứ vị trí nào trong nội dung thẻ body, nơi mà chúng ta muốn hiển thị icon

 

 

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>Sử dụng thư viện font awesome</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/fontawesome/css/all.css" rel="stylesheet" type="text/css"/>
        <link href="css/index.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        Hình mặt cười 
        <i class="fas fa-smile"></i>
    </body>
</html>

 

Cập nhật thư viện font awesome

Thư viện font awesome sẽ thường xuyên được cập nhật để có thêm những icon mới. Để tiến hành sử dụng bản cập nhật, chúng ta thực hiện tải về và ghi đè lên thư mục font awesome đang có. Thông thường, khi này các icon cũ vẫn sẽ được giữ nguyên hoặc có chút thay đổi nhưng ý nghĩa vẫn vậy, ví dụ hình mặt cười thì vẫn là hình mặt cười, nhưng cười theo cách khác đi. 

 

Tạo vào 2019-10-23 07:17:12, Cập nhật 28 ngày trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Hướng dẫn sử dụng font awesome tạo icon cho website tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Hướng dẫn sử dụng font awesome tạo icon cho website
Gửi đi
Bạn đang đọc bài viết Hướng dẫn sử dụng font awesome tạo icon cho website , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
37704
0.11052107810974