Cách chèn icon vào html
|
Nội dung Show
Cách thêm biểu tượngCách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng (icon), chẳng hạn như Font Awesome. Thêm tên của biểu tượng mong muốn vào phần tử HTML nội dòng (inline HTML). Như Tất cả các biểu tượng trong các thư viện biểu tượng này có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, độ bóng, v.v.) Thư viện Font AwesomeĐể sử dụng các biểu tượng của thư viện Font Awesome, hãy truy cập fontawesome.com , đăng nhập và nhận mã để thêm vào phần Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm! Ví dụ:Kết quả:Biểu tượng BootstrapĐể sử dụng glyphicons Bootstrap, hãy thêm dòng sau vào phần Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm! Ví dụ:Kết quả:Biểu tượng GoogleĐể sử dụng các biểu tượng của Google, hãy thêm
dòng sau vào phần Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm! Ví dụ:Kết quả:Icon không chỉ giúp biểu đặt cảm xúc rõ ràng khi nhắn tin mà còn giúp cho trang Web trở nên sinh động hơn, tạo thiện cảm cho người xem. Trong lập trình Web, các lập trình viên cũng thường chèn icon vào trang Web để trang trí. Cách nhanh nhất để chèn đó là tận dụng các thư viện icon. Trong phần , chúng ta sẽ khai báo liên kết với thư viện và sau đó chèn icon vào bất kỳ phần tử nào trong phần . Thư viện mà mình hay dùng đó là Font Awesome, Bootstrap Icon, Google Icon. Icon trong các thư viện này rất đa dạng, phong phú, hình ảnh khá bắt mắt với nhiều chủng loại, kích thước, màu sắc khác nhau. Để chèn được icon vào trang web thì trong phần , bạn cần thêm dòng sau: 1. Chèn icon của Font AwesomeVí dụ:
Kết quả: 2. Chèn icon của BootstrapVí dụ: Kết quả:  3. Chèn icon của GoogleVí dụ: cloud favorite attachment computer traffic
Lời kết: Việc chèn icon rất đơn giản, chỉ cần khai báo thư viện là xong, không cần phải tải hay cài đặt gì cả. Cách làm thì đơn giản nhưng lại khiến cho trang web trở nên sinh động hơn rất nhiều, gây thiện cảm cho người hơn rất nhiều. |
