Cách sử dụng Font Awesome trong thiết kế web

Khi thiết kế giao diện website không thể thiếu icon làm đẹp cho web, tuy nhiên nếu bạn không biết sử dụng các phần mềm đồ họa để tạo thì Font Awesome sẽ giúp bạn giải quyết vấn đề này. Với hơn 1.019 icon hoàn toàn miễn phí, rất dễ dàng để tích hợp vào website, công việc của bạn bây giờ là lựa chọn icon và copy paste. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần dùng bản miễn phí là đủ để làm đẹp cho website của mình.

Tích hợp Font Awesome vào website như thế nào ?

Font Awesome cung cấp cho bạn 02 cách thức để chèn vào website

Cách 1: Truy cập vào website https://fontawesome.com/start , coppy đoạn link sau và chèn vào giữa thẻ <head> của trang web

<head>

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.6.3/css/all.css” integrity=”sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/” crossorigin=”anonymous”>

</head>

<body>

Cách sử dụng Font Awesome trong thiết kế web

Cách 2: Truy cập vào website https://fontawesome.com/download, chọn Download Font Awesome , chọn Free for web để tải bộ thư viện này về. Sau khi tải về , tiến hành giải nén và coppy toàn bộ thư mục Font Awesome vừa giải nén để chung với  project website của bạn. Tiếp theo chèn link sau vào thẻ giữa thẻ <head> của trang web

<head>
<link href=”/your-path-to-fontawesome/css/all.css” rel=”stylesheet”> <!–load all styles –>
</head>

<body>

Cách sử dụng Font Awesome trong thiết kế web

Sử dụng Font Ausome như thế nào?

Rất đơn giản, sau khi tích hợp vào website, bạn chỉ cần truy cập đường dẫn https://fontawesome.com/icons?d=gallery, check vào Free cột bên trái để sử dụng những icon miễn phí.

Click vào icon muốn sử dụng, và coppy đoạn code class nằm trong thẻ  <i class=””></i>  (ví dụ <i class=”fab fa-accusoft”></i>), và chèn vào vị trí trên website của bạn.

Cách sử dụng Font Awesome trong thiết kế web

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

 

THAM KHẢO THÊM