ADVERTISEMENT
  • Trang chủ
  • Tin Tức
  • Liên hệ
Chủ Nhật, Tháng Sáu 4, 2023
Tin Tức Giáo Dục Học Tập Tiny
No Result
View All Result
  • Giáo Án
  • Học Tập
    • Lớp 1
    • Lớp 2
    • Lớp 3
    • Lớp 4
    • Lớp 5
    • Lớp 6
    • Lớp 7
    • Lớp 8
    • Lớp 9
    • Lớp 10
    • Lớp 11
    • Lớp 12
  • Sách Tham Khảo
    • Sách Tham Khảo Lớp 1
    • Sách Tham Khảo Lớp 2
    • Sách Tham Khảo Lớp 3
    • Sách Tham Khảo Lớp 4
    • Sách Tham Khảo Lớp 5
    • Sách Tham Khảo Lớp 6
    • Sách Tham Khảo Lớp 7
    • Sách Tham Khảo Lớp 8
    • Sách Tham Khảo Lớp 9
    • Sách Tham Khảo Lớp 10
    • Sách Tham Khảo Lớp 11
    • Sách Tham Khảo Lớp 12
  • Ôn Thi
    • Thi THPT Quốc Gia
    • Địa Lý
    • Giáo Dục Công Dân
    • Hóa Học
    • Lịch Sử
    • Ngoại Ngữ
    • Ngữ Văn
    • Sinh Học
    • Vật Lý
    • Toán Học
  • Sách Kinh Tế
  • Sách Ngoại Ngữ
    • Tiếng Nhật
    • Tiếng Pháp
    • Tiếng Trung
  • Biểu mẫu
    • Giáo dục – Đào tạo
  • Sách Văn Học
  • Sách Y Học
  • Tài Liệu
    • Thủ tục hành chính
    • Việc làm – Nhân sự
    • Y học
    • Bộ đội – Quốc phòng – Thương binh
    • Doanh nghiệp
    • Giáo dục – Đào tạo
    • Giao thông vận tải
    • Hôn nhân – Gia đình
    • Quyền Dân sự
    • Tin Tức
  • Tâm Lý & Kỹ Năng
  • Giáo Án
  • Học Tập
    • Lớp 1
    • Lớp 2
    • Lớp 3
    • Lớp 4
    • Lớp 5
    • Lớp 6
    • Lớp 7
    • Lớp 8
    • Lớp 9
    • Lớp 10
    • Lớp 11
    • Lớp 12
  • Sách Tham Khảo
    • Sách Tham Khảo Lớp 1
    • Sách Tham Khảo Lớp 2
    • Sách Tham Khảo Lớp 3
    • Sách Tham Khảo Lớp 4
    • Sách Tham Khảo Lớp 5
    • Sách Tham Khảo Lớp 6
    • Sách Tham Khảo Lớp 7
    • Sách Tham Khảo Lớp 8
    • Sách Tham Khảo Lớp 9
    • Sách Tham Khảo Lớp 10
    • Sách Tham Khảo Lớp 11
    • Sách Tham Khảo Lớp 12
  • Ôn Thi
    • Thi THPT Quốc Gia
    • Địa Lý
    • Giáo Dục Công Dân
    • Hóa Học
    • Lịch Sử
    • Ngoại Ngữ
    • Ngữ Văn
    • Sinh Học
    • Vật Lý
    • Toán Học
  • Sách Kinh Tế
  • Sách Ngoại Ngữ
    • Tiếng Nhật
    • Tiếng Pháp
    • Tiếng Trung
  • Biểu mẫu
    • Giáo dục – Đào tạo
  • Sách Văn Học
  • Sách Y Học
  • Tài Liệu
    • Thủ tục hành chính
    • Việc làm – Nhân sự
    • Y học
    • Bộ đội – Quốc phòng – Thương binh
    • Doanh nghiệp
    • Giáo dục – Đào tạo
    • Giao thông vận tải
    • Hôn nhân – Gia đình
    • Quyền Dân sự
    • Tin Tức
  • Tâm Lý & Kỹ Năng
No Result
View All Result
Tin Tức Giáo Dục Học Tập Tiny
No Result
View All Result
ADVERTISEMENT

Trang chủ » Blog » Hướng dẫn icon html css – biểu tượng html css

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

Sam Van by Sam Van
24 Tháng Mười, 2022
in Blog
0
Hướng dẫn icon html css – biểu tượng html css
ADVERTISEMENT
ADVERTISEMENT
7 cách bói bài tây 52 lá tốt nhất

Có thể bạn quan tâm
  • 8 các định nghĩa về vecto lớp 10 hay nhất, bạn nên biết
  • 7 vui buồn tuổi thơ lớp 7 van bieu cam hot nhất hiện nay
  • 6 trắc nghiệm lý thuyết hóa 12 hk1 hot nhất, đừng bỏ lỡ
  • 7 viết chương trình tính hot nhất
  • 8 tổ chức xã hội của người tối cổ hay nhất

Xem Tắt

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

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ả:

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


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ả:

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


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ả:

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

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

Liên Quan:

Bách gia chư tử là gìBách gia chư tử là gì Chúng ta đáng yêu như The ReviewChúng ta đáng yêu như The Review Cách qua môn triết học mác – lêninCách qua môn triết học mác – lênin Hướng dẫn display: table trong css – display: table in cssHướng dẫn display: table trong css – display: table in css
Tags: Hướng dẫn icon html css - biểu tượng html css
ADVERTISEMENT
Previous Post

Top 20 cửa hàng chevrolet Huyện Yên Dũng Bắc Giang 2022

Next Post

Văn mẫu lớp 12: Đoạn văn nghị luận về tình yêu thương (18 mẫu)

Related Posts

6 br2 h20 tốt nhất
Blog

6 br2 h20 tốt nhất

4 Tháng Sáu, 2023
4 suit up là gì hay nhất, đừng bỏ qua
Blog

4 suit up là gì hay nhất, đừng bỏ qua

4 Tháng Sáu, 2023
5 ngôn ngữ là vỏ bọc của tư duy hay nhất
Blog

5 ngôn ngữ là vỏ bọc của tư duy hay nhất

4 Tháng Sáu, 2023
6 mở đầu môn hóa học tốt nhất
Blog

6 mở đầu môn hóa học tốt nhất

4 Tháng Sáu, 2023
Tổng hợp 7 học phí hvnh hot nhất
Blog

Tổng hợp 7 học phí hvnh hot nhất

4 Tháng Sáu, 2023
Top 5 diện tích xq hình nón hay nhất, bạn nên biết
Blog

Top 5 diện tích xq hình nón hay nhất, bạn nên biết

4 Tháng Sáu, 2023
Next Post
Văn mẫu lớp 12: Đoạn văn nghị luận về tình yêu thương (18 mẫu)

Văn mẫu lớp 12: Đoạn văn nghị luận về tình yêu thương (18 mẫu)

Bài Viết Mới

6 br2 h20 tốt nhất
Blog

6 br2 h20 tốt nhất

by Tiny Edu
4 Tháng Sáu, 2023
0

Qua bài viết này mvatoi.com.vn xin chia sẻ với các bạn thông tin và kiến thức về br2 h20 hot...

Read more
Món ngon trong những ngày Hà Nội nóng

Món ngon trong những ngày Hà Nội nóng

4 Tháng Sáu, 2023
4 suit up là gì hay nhất, đừng bỏ qua

4 suit up là gì hay nhất, đừng bỏ qua

4 Tháng Sáu, 2023
4 con nguoi co bao nhieu day than kinh hay nhất, đừng bỏ qua

4 con nguoi co bao nhieu day than kinh hay nhất, đừng bỏ qua

4 Tháng Sáu, 2023
Danh sách 6 oxit nào tác dụng với h2so4 hay nhất, đừng bỏ qua

Danh sách 6 oxit nào tác dụng với h2so4 hay nhất, đừng bỏ qua

4 Tháng Sáu, 2023
6 công thức tính q hay nhất, đừng bỏ lỡ

6 công thức tính q hay nhất, đừng bỏ lỡ

4 Tháng Sáu, 2023
5 ngôn ngữ là vỏ bọc của tư duy hay nhất

5 ngôn ngữ là vỏ bọc của tư duy hay nhất

4 Tháng Sáu, 2023
6 mở đầu môn hóa học tốt nhất

6 mở đầu môn hóa học tốt nhất

4 Tháng Sáu, 2023
Tham Khảo 6 2 góc đồng vị hot nhất, đừng bỏ lỡ

Tham Khảo 6 2 góc đồng vị hot nhất, đừng bỏ lỡ

4 Tháng Sáu, 2023
Tổng hợp 7 học phí hvnh hot nhất

Tổng hợp 7 học phí hvnh hot nhất

4 Tháng Sáu, 2023

Phản hồi gần đây

  • Tả cây cam mà em yêu thích (Dàn ý + 7 mẫu) - Tài Liệu Miễn Phí trong Tả một loại cây ăn quả mà em thích (Dàn ý + 70 Mẫu)
  • Mẫu vở luyện viết chữ đẹp - Tài Liệu Miễn Phí trong Mẫu giấy 4 ô ly
  • Bộ đề thi thử vào lớp 10 môn tiếng Anh năm 2018 - 2019 - Tài Liệu Miễn Phí trong Bộ đề thi thử vào lớp 10 môn Toán năm 2018 – 2019
  • Đề thi thử THPT Quốc gia năm 2017 môn Địa lý trường THPT Đoàn Thượng, Hải Dương (Lần 1) - Tài Liệu Miễn Phí trong Đề thi thử THPT Quốc gia năm 2017 môn Địa lý trường THPT Lý Thái Tổ, Bắc Ninh (Lần 1)
  • Đoạn văn tiếng Anh về môn thể thao yêu thích (8 mẫu) - Tài Liệu Miễn Phí trong Đoạn văn tiếng Anh về ngày Tết
ADVERTISEMENT
  • Trang chủ
  • Tin Tức
  • Liên hệ
HOME - TRANG CHU

© 2021 Copyright - Quà Tặng Tiny

No Result
View All Result
  • Giáo Án
  • Học Tập
    • Lớp 1
    • Lớp 2
    • Lớp 3
    • Lớp 4
    • Lớp 5
    • Lớp 6
    • Lớp 7
    • Lớp 8
    • Lớp 9
    • Lớp 10
    • Lớp 11
    • Lớp 12
  • Sách Tham Khảo
    • Sách Tham Khảo Lớp 1
    • Sách Tham Khảo Lớp 2
    • Sách Tham Khảo Lớp 3
    • Sách Tham Khảo Lớp 4
    • Sách Tham Khảo Lớp 5
    • Sách Tham Khảo Lớp 6
    • Sách Tham Khảo Lớp 7
    • Sách Tham Khảo Lớp 8
    • Sách Tham Khảo Lớp 9
    • Sách Tham Khảo Lớp 10
    • Sách Tham Khảo Lớp 11
    • Sách Tham Khảo Lớp 12
  • Ôn Thi
    • Thi THPT Quốc Gia
    • Địa Lý
    • Giáo Dục Công Dân
    • Hóa Học
    • Lịch Sử
    • Ngoại Ngữ
    • Ngữ Văn
    • Sinh Học
    • Vật Lý
    • Toán Học
  • Sách Kinh Tế
  • Sách Ngoại Ngữ
    • Tiếng Nhật
    • Tiếng Pháp
    • Tiếng Trung
  • Biểu mẫu
    • Giáo dục – Đào tạo
  • Sách Văn Học
  • Sách Y Học
  • Tài Liệu
    • Thủ tục hành chính
    • Việc làm – Nhân sự
    • Y học
    • Bộ đội – Quốc phòng – Thương binh
    • Doanh nghiệp
    • Giáo dục – Đào tạo
    • Giao thông vận tải
    • Hôn nhân – Gia đình
    • Quyền Dân sự
    • Tin Tức
  • Tâm Lý & Kỹ Năng

© 2021 Copyright - Quà Tặng Tiny