Mục lục
Cách nhúng Font Awesome qua CDN
Chỉ cần chèn đoạn mã sau vào phần <head> của website:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />Vậy là bạn đã có thể sử dụng mọi biểu tượng của Font Awesome mà không cần tải gì thêm.
Tìm kiếm biểu tượng
Truy cập thư viện chính thức để duyệt và tìm biểu tượng theo tên, thể loại hoặc từ khóa:
Ví dụ sử dụng icon mạng xã hội
Chèn các biểu tượng bằng thẻ <i> với class tương ứng:
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-pinterest"></i>
<i class="fa-brands fa-x-twitter"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-tiktok"></i>Kết quả hiển thị:
Mẹo tùy chỉnh nhanh
- Dùng
font-sizeđể thay đổi kích thước icon. - Dùng
colorđể đổi màu theo brand hoặc theo theme. - Có thể dùng với
uk-icon-buttonnếu bạn dùng UIkit.
Tổng kết
Font Awesome giúp bạn dễ dàng thêm icon đẹp mắt vào website mà không cần dùng ảnh. Với kho biểu tượng phong phú, hỗ trợ CDN, dễ dùng và cực kỳ phổ biến, đây là công cụ không thể thiếu cho mọi front-end dev.
Chúc bạn thiết kế website thật chuyên nghiệp và sinh động!
Bình luận