Xem Tắt
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
Bạn Đang Xem: Hướng dẫn icon html css – biểu tượng html css
Ví dụ:
Kết quả:
Thư viện Font Awesome
Ví dụ:
<script src="https://kit.fontawesome.com/yourcode.js"></script>Kết quả: Không cần tải xuống hoặc cài đặt gì thêm!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
Kết quả:
Biểu tượng Bootstrap
Xem Thêm : 5 viettel thuê bao không được phép nạp thẻ hot nhất, đừng bỏ lỡ
Biểu tượng Google
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Kết quả: Không cần tải xuống hoặc cài đặt gì thêm!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
Kết quả:
Biểu tượng Bootstrap
Xem Thêm : 5 viettel thuê bao không được phép nạp thẻ hot nhất, đừng bỏ lỡ
Biểu tượng Google
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">Kết quả: Không cần tải xuống hoặc cài đặt gì thêm!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
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.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome
/4.7.0/css/font-awesome.min.css">VÍ dụ icon bằng Font Awesome
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/
4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fab fa-500px"></i>
<i class="fas fa-american-sign-language-interpreting"></i>
<i class="fab fa-angellist"></i>
<i class="fab fa-app-store-ios"></i>
<i class="fas fa-arrow-square-up"></i>
</body>
</html>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ì.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
Ví dụ icon với Bootstrap
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css
/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
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ả.
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
Xem Thêm : 7 cách bói bài tây 52 lá tốt nhất
0
VÍ dụ về cách dùng Google Icon
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
1
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.
Nguồn: https://quatangtiny.com
Danh mục: Blog
