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ả.
0VÍ dụ về cách dùng Google Icon
1Bạ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.