Icon minh họa hành động người dùng. Thư viện icon phổ biến:
- Font Awesome: fontawesome.com
- Flaticon: flaticon.com
- Material Design Icons: material.io
Bài viết hướng dẫn dùng Font Awesome qua CDN. Quy trình tương tự cho các thư viện khác.
Nhúng CDN Font Awesome
Thêm link CSS vào <head>:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
File CSS minified (nén bỏ khoảng trắng) chứa định nghĩa tất cả icon miễn phí. Có thêm SVG library (cần JS) nhưng không đề cập ở đây.
Sử dụng Icon trong HTML
<div class="icon-container"> <i class="fab fa-twitter"></i> <span class="fas fa-camera"></span> <span class="fas fa-heart"></span> </div>
- Dùng
<i>hoặc<span>(inline element) đều được.<i>phổ biến hơn. - Nội dung rỗng — icon được render qua CSS class.
- Class có 2 phần: style prefix + icon name.
Prefix và Icon Name
fa-: Font Awesome.fab=fa+b(brand - thương hiệu).fas=fa+s(solid - đậm).- Các prefix khác (regular, light, duotone) cần tài khoản PRO.
Icon name: fa-twitter, fa-camera, fa-heart... Tra cứu trên trang Font Awesome.
Định dạng Icon với CSS
Icon là inline element → dùng font-size, color, margin... như text.
.icon-container { font-size: 24px; }
.fab { font-size: 3rem; color: #1DA1F1; }
.fa-heart { font-size: 4rem; color: crimson; }
Tham khảo docs Font Awesome để biết thêm tùy chọn style (xoay, lật, animation, stack...).