• Trang chủ
  • Học CSS
  • [Tự học CSS] – Cùng tìm hiểu về các biểu tượng cơ bản trong CSS
70 lượt xem

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

Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Hôm nay mình rất vui khi được viết bài viết này, tuy nó đơn giản nhưng nó rất quan trọng bởi vì hiện nay khi thiết kế web thì các trang web đều dùng các biểu tượng 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:

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

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.

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

Thẻ tìm kiếm:

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 *