Hướng dẫn icon html css - biểu tượng html css

Nội dung

• Cách thêm biểu tượng
• Thư viện Font Awesome
  • Ví dụ:
  • Kết quả:
• Biểu tượng Bootstrap
  • Ví dụ:
  • Kết quả:
• Biểu tượng Bootstrap
  • Ví dụ:
  • Kết quả:

Cách thêm biểu tượng

Thư viện Font Awesome

Ví dụ:

Kết quả:

Thư viện Font Awesome

Ví dụ:

Kết quả: 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

Biểu tượng Google

Kết quả: 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

Biểu tượng Google

Kết quả: Không cần tải xuống hoặc cài đặt gì thêm!

Ví dụ:

cloud
favorite
attachment
computer
traffic

Kết quả:

Chào các bạn! Ngày nay thiết kế web ngày càng phát triển và ngày càng có nhiều kỹ thuật mới được sử dụng, một trong những kỹ thuật khá hay đó là dùng css icons. Khái niệm chắc các bạn đã từng nghe và sử dụng. Tuy nhiên, bạn dùng tới nó nhưng bạn đã hiểu về khái niệm thực sự của nó là gì chưa? Và những ưu điểm, lợi ích mà css icons mang lại khi sử dụng nó là gì? Bài viết này mình sẽ nói một cách cụ thể hơn nhé.

Cách thêm icon

Cách đơn giản nhất để thêm icon vào một phần tử html là sử dụng thư viện của chúng. Như Font Awesome, chỉ cần thêm tên icon đó vào bất cứ thành phần HTML nội dòng nào. Tất cả những icon trong thư viện icon đều thuộc dạng vector có thể phóng to (scale) trong CSS (kích thước, màu sắc, bóng…)

Font Awesome

Để có thể dùng icon của Font Awesome ta cần thêm dòng dưới đây vào phần head trong trang HTML.

VÍ dụ icon bằng Font Awesome

Bootstrap Icon

Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần trong trang HTML. Cách này cũng không cần tải hay cài đặt gì.

Ví dụ icon với Bootstrap

Google Icon 

Để có thể dùng google Icon, ta thêm dòng dưới đây vào phần trong trang HTML. Cũng giống 2 cách trên, bạn không cần tải hay cài đặt gì cả.

VÍ dụ về cách dùng Google Icon

Bạn có thể xem thêm:

CSS Transitions

CSS 3D Transforms

CSS Tables

CSS Border Images

Lời kết

Bài học của mình hôm nay đến đây kết thúc rồi. Xin chào vào hẹn gặp các bạn trong các seri tiếp theo nhé. Chúc các bạn có một ngày làm việc vui vẻ.

Để tìm hiểu thêm các kiến thức về lập trình web bạn có thể xem thêm tại debug1s.com.