Rate this post

Trong HTML, có một số cách để sử dụng icon trong trang web. Một trong số đó là sử dụng thẻ <i> hoặc <span> với thuộc tính class để sử dụng font-icon. Điều này có thể được thực hiện bằng cách sử dụng một thư viện font-icon như Font Awesome hoặc các thư viện khác, hoặc thông qua việc tùy chỉnh CSS để thêm một icon vào một thẻ HTML.

Các bài viết liên quan

Ví dụ:

<i class="fas fa-envelope"></i>

Trong ví dụ này, ta sử dụng thẻ <i> và class “fas fa-envelope” để sử dụng icon envelope từ thư viện font-awesome.

Có một cách khác là sử dụng hình ảnh để hiển thị icon. Điều này có thể được thực hiện bằng cách sử dụng thẻ <img> và thuộc tính src để chỉ định đường dẫn đến hình ảnh icon.

<img src="path/to/icon.png" alt="icon">

Trong ví dụ này, ta sử dụng thẻ <img> và thuộc tính src để chỉ định đường dẫn đến hình ảnh icon.

Cần lưu ý rằng sử dụng hình ảnh để hiển thị icon có thể làm tăng kích thước tập tin của trang web và giảm tốc độ tải trang.

một số ví dụ sử dụng icon trong html

Ví dụ 1: Sử dụng Font Awesome để hiển thị icon

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<i class="fas fa-envelope"></i> <i class="fas fa-phone"></i> <i class="fas fa-map-marker-alt"></i>

Ví dụ 2: Sử dụng hình ảnh để hiển thị icon

<img src="path/to/email-icon.png" alt="email icon"> <img src="path/to/phone-icon.png" alt="phone icon"> <img src="path/to/location-icon.png" alt="location icon">

Ví dụ 3: Sử dụng icon làm nút share trên mạng xã hội

<a href="#" class="social-icon"> <i class="fab fa-facebook-f"></i> </a>
<a href="#" class="social-icon"> <i class="fab fa-twitter"></i> </a>
<a href="#" class="social-icon"> <i class="fab fa-instagram"></i> </a>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now