[Tự học CSS] – Cùng tìm hiểu về các biểu tượng cơ bản trong CSS

Cách Thêm Biểu Tượng

  • Cá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, chẳng hạn như sử dụng các phông chữ tuyệt đẹp của thư viện.
  • Thêm tên của lớp biểu tượng được chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như <i>hoặc <span>).
  • Tất cả các biểu tượng trong thư viện biểu tượng bên dưới, là các vectơ có thể mở rộng có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v …)

Phông Chữ Biểu Tượng

Để sử dụng các biểu tượng phông chữ tuyệt vời, hãy thêm dòng code sau vào bên trong thẻ <head>trang HTML của bạn:

Ví dụ:

Kết quả là:

Một vài phông chữ biểu tượng

 

CSS thêm cho nó về kích cỡ và màu sắc

 

Biểu Tượng Của Bootstrap

Để sử dụng glyphicons Bootstrap, hãy thêm dòng code sau vào bên trong thẻ <head> trang HTML của bạn:

Ví dụ :

Lưu ý: Không cần tải xuống hoặc cài đặt, vì nó là thư viện được cung cấp sẵn nên ta chỉ việc lấy ra mà dùng thôi !

Biểu Tượng Của Google

Để sử dụng các biểu tượng của Google, hãy thêm dòng code sau vào bên trong thẻ <head> của trang HTML của bạn:

Ví dụ :

Lưu ý: Chúng ta cũng không cần tải xuống hoặc cài đặt, vì nó là thư viện được cung cấp sẵn nên ta chỉ việc lấy ra mà dùng thôi !

Chỉ có vậy thôi, quá đơn giản phải không nào ? Qua bài viết này chúng ta đã hiểu được khái niệm và cách dùng các biểu tượng có sẵn trong CSS là như thế nào. Cảm ơn các bạn đã xem bài viết. Nếu có thắc mắc hoặc góp ý nào hãy comment ở phía dưới bài viết.

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 *

vừa mua website