Icon HTML là yếu tố giúp website trở nên trực quan và thu hút hơn. Với nhiều phương pháp như sử dụng Font Awesome, hình ảnh SVG hay Unicode, bạn có thể dễ dàng chèn icon phù hợp với nội dung trang web.
Đọc bài viết sau đây để được giải đáp chi tiết hơn về:
- Vai trò của icon trong HTML
- Cách chèn icon vào trang web HTML bằng Font Awesome, Google Icons hay Bootstrap
- Cách tạo nút icon trên trang web
- Cách thêm icon vào thanh tiêu đề của trang web HTML
- Một số câu hỏi thường gặp về icon HTML
Tổng quan về icon HTML
Icon (Biểu tượng) trong HTML được sử dụng để trực quan hóa và truyển đạt thông tin, hướng dẫn người dùng thực hiện hành động, làm nổi bật các ghi chú quan trọng hoặc thêm các yếu tố trang trí vào trang web.
Các biểu tượng không chỉ giúp tăng tính thẩm mỹ mà còn cải thiện trải nghiệm người dùng. Tuy nhiên, nếu biểu tượng không rõ ràng hoặc không được dùng đúng cách, người dùng có thể gặp khó khăn trong việc hiểu và sử dụng chúng hiệu quả.
3 cách phổ biến để chèn icon vào trang web HTML
Để chèn icon vào HTML, bạn có thể thêm tên của biểu tượng (icon) đó vào bất kỳ phần tử nào của HTML, thông thường là <i> và <span>.
Các thư viện icon phổ biến hiện nay đều cung cấp biểu tượng dạng vector, cho phép tùy chỉnh bằng CSS (về kích thước, màu sắc, hiệu ứng bóng đổ, v.v.). Lưu ý là bạn cần phải nhúng/import thư viện icon trước (qua CSS hoặc JavaScript), sau đó phải sử dụng đúng cú pháp và class name theo quy định của từng thư viện.
Có nhiều cách để chèn icon vào HTML, nhưng ba phương pháp phổ biến nhất là sử dụng Font Awesome, Bootstrap Icons và Google Icons.
Hãy cùng ITviec tìm hiểu chi tiết từng cách chèn icon vào trang web HTML dưới đây!
Chèn icon bằng Font Awesome
Font Awesome là thư viện icon phổ biến, hỗ trợ đa dạng biểu tượng đẹp mắt và dễ sử dụng. Để sử dụng các biểu tượng của Font Awesome, bạn có thể truy cập trang web chính thức và đăng nhập để nhận mã sử dụng.
Để thực hiện chèn icon với Font Awesome, bạn có thể chèn như sau:
<!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" /> </head> <body> <p>Các biểu tượng trên Font Awesome:</p> <i class="fas fa-band-aid"></i> <i class="fas fa-cat"></i> <i class="fas fa-dragon"></i> <i class="far fa-clock"></i> <i class="fas fa-clock"></i> <p>Định dạng icon trên Font Awesome (kích thước, màu sắc và bóng đổ):</p> <i class="fas fa-clock" style="font-size:24px;"></i> <i class="fas fa-clock" style="font-size:36px;"></i> <i class="fas fa-clock" style="font-size:48px;color:red;"></i> <i class="fas fa-clock" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Ở ví dụ trên, có thể thấy:
- Sử dụng các icon trong thư viện của Font Awesome với bằng cách chèn cú pháp sử dụng cdn từ bên thứ 3:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
- Để thực hiện định dạng icon, bạn sẽ cần sử dụng đến các thuộc tính của CSS như font-size, color và text-shadow.
Chèn icon bằng Bootstrap
Cách này phù hợp khi bạn đã sử dụng Bootstrap cho website. Để sử dụng thư viện icon của Bootstrap, bạn có thể thực hiện như sau:
<!DOCTYPE html> <html> <head> <title>Bootstrap Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"> </head> <body class="container mt-4"> <p>Các biểu tượng Bootstrap Icons hiện đại:</p> <i class="bi bi-cloud"></i> <i class="bi bi-x-circle"></i> <i class="bi bi-person"></i> <i class="bi bi-envelope"></i> <i class="bi bi-hand-thumbs-up"></i> <p class="mt-4">Định dạng icon Bootstrap (kích thước, màu sắc và bóng đổ):</p> <i class="bi bi-cloud" style="font-size:24px;"></i> <i class="bi bi-cloud" style="font-size:36px;"></i> <i class="bi bi-cloud" style="font-size:48px;color:red;"></i> <i class="bi bi-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Ở ví dụ trên, có thể thấy:
- Tải thư viện Bootstrap 3 bao gồm glyphicons, một tập hợp icon tích hợp trong Bootstrap 3 qua thẻ <link rel=”stylesheet
- Tương tự, định dạng kiểu của icon bằng các thuộc tính của CSS.
- Tuy nhiên, Glyphicons chỉ có trong Bootstrap 3, từ Bootstrap 4 trở đi, bạn cần dùng Font Awesome hoặc Bootstrap Icons thay thế.
- Nếu cần nhiều icon hơn, nên dùng Font Awesome hoặc Google Material Icons.
Chèn icon bằng Google
Google Icon cung cấp thư viện Material Icons với thiết kế đơn giản và hiện đại. Để sử dụng các biểu tượng của Google, bạn thực hiện như sau:
<!DOCTYPE html> <html> <head> <title>Google Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <p>Some Google icons:</p> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> <br><br> <p>Styled Google icons (size, color, and shadow):</p> <i class="material-icons" style="font-size:24px;">cloud</i> <i class="material-icons" style="font-size:36px;">cloud</i> <i class="material-icons" style="font-size:48px;color:red;">cloud</i> <i class="material-icons" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;">cloud</i> </body> </html>
Kết quả hiển thị cho đoạn mã trên:
Ở ví dụ trên, có thể thấy:
- Tải thư viện Google Material Icons từ Google Fonts và cần khai báo CSS class “material-icons” để sử dụng icon.
- Tương tự tùy chỉnh định dạng với CSS.
- Ngoài ra, thư viện icon của Google tương thích tốt trên tất cả trình duyệt.
Bên cạnh đó, Google còn cung cấp một số biến thể khác của Material Icons như Outlined, Round, Sharp và Two-tone. Để sử dụng các biến thể này thông qua ví dụ như sau:
<!-- Outlined --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> <i class="material-icons-outlined">cloud</i> <!-- Round --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"> <i class="material-icons-round">cloud</i> <!-- Sharp --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet"> <i class="material-icons-sharp">cloud</i> <!-- Two Tone --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet"> <i class="material-icons-two-tone">cloud</i>
Ngoài ra, Google đã phát triển Material Symbols mới hơn (bản cập nhật của Material Icons) với nhiều tùy chọn hơn.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <span class="material-symbols-outlined">cloud</span>
Cách tạo icon button trên trang web HTML
Tạo và định dạng icon button sẽ giúp trang web trở nên sinh động và nâng cao trải nghiệm người dùng tốt hơn. Để thực hiện định dạng cho button, bạn có thể sử dụng thuộc tính CSS theo quy trình như sau:
Bước 1
Thêm thư viện biểu tượng, chẳng hạn như Font Awesome và thêm biểu tượng vào các nút HTML.
<!-- Thêm thư viện biểu tượng --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Thêm biểu tượng font awesome icons vào button --> <p>Icon buttons:</p> <button class="btn"><i class="fa fa-home"></i></button> <button class="btn"><i class="fa fa-bars"></i></button> <button class="btn"><i class="fa fa-trash"></i></button> <button class="btn"><i class="fa fa-close"></i></button> <button class="btn"><i class="fa fa-folder"></i></button> <p>Biểu tượng button với text:</p> <button class="btn"><i class="fa fa-home"></i> Home</button> <button class="btn"><i class="fa fa-bars"></i> Menu</button> <button class="btn"><i class="fa fa-trash"></i> Trash</button> <button class="btn"><i class="fa fa-close"></i> Close</button> <button class="btn"><i class="fa fa-folder"></i> Folder</button>
Hình ảnh icon HTML khi chưa được định dạng và khi có text:
Sau đó, bạn tiến hành định dạng cho các biểu tượng trở nên sinh động và phù hợp với trang web hơn. Bạn có thể tham khảo qua bảng màu HTML để định dạng theo màu sắc phù hợp. Ví dụ hoàn chỉnh về cách tạo button icon như sau:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 16px; font-size: 16px; cursor: pointer; } /* Darker background on mouse-over */ .btn:hover { background-color: RoyalBlue; } </style> </head> <body> <h2>Icon Buttons</h2> <p>Icon buttons:</p> <button class="btn"><i class="fa fa-home"></i></button> <button class="btn"><i class="fa fa-bars"></i></button> <button class="btn"><i class="fa fa-trash"></i></button> <button class="btn"><i class="fa fa-close"></i></button> <button class="btn"><i class="fa fa-folder"></i></button> <p>Icon buttons with text:</p> <button class="btn"><i class="fa fa-home"></i> Home</button> <button class="btn"><i class="fa fa-bars"></i> Menu</button> <button class="btn"><i class="fa fa-trash"></i> Trash</button> <button class="btn"><i class="fa fa-close"></i> Close</button> <button class="btn"><i class="fa fa-folder"></i> Folder</button> </body> </html>
Kết quả đoạn mã hoàn chỉnh:
Xem thêm: CSS là gì? Hướng dẫn sử dụng CSS thiết kế web hiệu quả
Cách thêm icon vào thanh tiêu đề của trang web
Chèn icon HTML vào thanh tiêu đề của trang web sẽ liên quan đến việc thiết lập một favicon. Favicon là một biểu tượng nhỏ hiển thị trong tab trình duyệt bên cạnh tiêu đề trang. Điều này được thực hiện bằng cách bao gồm một thẻ <link> trong phần <head> HTML với thuộc tính rel=”icon” trỏ đến tệp biểu tượng.
Hình ảnh ví dụ về chèn icon vào thanh tiêu đề trên trang web.
Để thêm favicon, bạn hãy sử dụng cú pháp trong phần <head> của file HTML:
<link rel="icon" href="icon_path" type="image/icon type">
Ví dụ: Ví dụ dưới đây sẽ trình bày cách thêm favicon vào trang web của bạn bằng cách đưa cú pháp thích hợp vào thẻ <head> của file HTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ITviec icon</title> <!-- add icon link --> <link rel="icon" href= "https://itviec.com/assets/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png" type="image/x-icon" /> </head> <body> <h1 style="color: black"> ITviec </h1> <p> ITviec icon được thêm trên thanh tiêu đề </p> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Câu hỏi thường gặp về icon HTML
Làm thế nào để thay đổi kích thước icon trong HTML?
Bạn có thể thay đổi kích thước của icon trong HTML bằng cách sử dụng CSS như sau:
- Với Font Awesome, dùng thuộc tính font-size.
- Với SVG, thay đổi thuộc tính width và height.
- Với hình ảnh, dùng width và height trong CSS hoặc HTML.
Font Awesome có miễn phí không?
Font Awesome cung cấp cả phiên bản miễn phí và trả phí. Phiên bản miễn phí bao gồm nhiều icon phổ biến, nhưng nếu bạn muốn dùng các icon độc quyền hoặc tùy chỉnh chuyên nghiệp hơn, bạn cần đăng ký gói Pro của Font Awesome. Bạn có thể tải và sử dụng Font Awesome miễn phí tại trang web chính thức.
Làm thế nào để thêm icon vào thanh tiêu đề trên HTML?
Để thực hiện chèn icon vào tiêu đề, bạn có thể sử dụng favicon bằng cách chèn vào <head> của trang HTML. Với cách này, favicon sẽ xuất hiện như một icon trên tab trình duyệt, giúp trang web chuyên nghiệp và ấn tượng hơn.
<head> <link rel="icon" href="favicon.ico" type="image/icon type"> </head>
Làm thế nào để thêm icon vào HTML hoặc CSS?
Có nhiều cách để thêm icon vào HTML hoặc CSS, tùy vào nhu cầu và mục đích sử dụng. Dưới đây là những phương pháp thường được sử dụng như:
- Sử dụng Font Awesome hoặc Bootstrap Icons: Bạn có thể chèn icon nhanh chóng bằng cách thêm một class vào thẻ <i> hoặc <span>. Ưu điểm của phương pháp này là thư viện icon có sẵn, có thể hỗ trợ tùy chỉnh màu sắc và kích thước bằng CSS.
- Sử dụng Google Material Icons: Google cung cấp bộ icon miễn phí có thể dễ dàng tích hợp vào trang web. Khi sử dụng thư viện icon của Google, bạn có thể dễ dàng tùy chỉnh màu sắc hoặc kích thước của icon bằng CSS.
- Dùng hình ảnh làm icon bằng CSS: Nếu bạn có icon riêng dưới dạng PNG hoặc SVG, bạn có thể sử dụng CSS để hiển thị chúng trên trình duyệt. Cách này sẽ phù hợp khi sử dụng icon thiết kế riêng, không phụ thuộc vào thư viện bên ngoài.
Tổng kết về icon HTML
Icon HTML là một yếu tố giúp cho website trở nên sinh động và dễ điều hướng hơn. Bạn có thể lựa chọn thêm icon HTML bằng nhiều cách như Font Awesome, SVG hay Unicode. Việc sử dụng icon đúng cách sẽ giúp cải thiện trải nghiệm người dùng và tối ưu trang web hiệu quả.
Xem thêm: Giải đáp “tất tần tật” những điều cần biết về HTML