Icon Trong CSS - NQ NEWS

Trang chủ » Cách Dùng Icon Trong Html » Icon Trong CSS - NQ NEWS

Có thể bạn quan tâm

NQ NEWS
No Result View All Result
No Result View All Result NQ NEWS No Result View All Result Home Kiến thức tổng hợp Lập trình Icon trong CSS @admiz by @admiz 27/12/2021 in Lập trình 0

Cách thêm icon

Cách đơn giản nhất để thêm icon (biểu tượng) vào trang HTML là dùng thư viện biểu tượng. như Font Awesome, chỉ cần thêm tên của lớp icon đó vào bất kì phần tử HTML nội dòng nào (như <i> hay <span>). Tất cả những icon trong thư viện icon dưới đây đề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 Icon

Để dùng icon của Font Awesome, thêm dòng dưới đây vào phần <head> trong trang HTML. Bạn không cần phải tải hay cài đặt gì cả.

<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="fa fa-cloud"></i><i class="fa fa-heart"></i><i class="fa fa-car"></i><i class="fa fa-file"></i><i class="fa fa-bars"></i></body></html>

Hình ảnh các icon trong ví dụ trên trình duyệtHình ảnh các icon trong ví dụ trên trình duyệt

Bootstrap Icon

Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần <haed> 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 bằng 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>

Bootstrap là lựa chọn khá phổ biến để lấy icon cho trang HTMLBootstrap là lựa chọn khá phổ biến để lấy icon cho trang HTML

Google Icon

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

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Ví dụ Google Icon

<!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>

Google cũng có thư viện icon riêng cho nhà phát triểnGoogle cũng có thư viện icon riêng cho nhà phát triển

Bài trước: Font trong CSS

Bài sau: Đường dẫn trong CSS

  • Bootstrap: Container
  • Trắc nghiệm CSS có đáp án P4
Post Views: 294 Tags: biểu tượng trong CSSchèn icon vào CSSCSShọc cssicon trong CSS Previous Post

Cảnh báo: Chrome 79 cho Android bị lỗi xóa dữ liệu, người dùng không nên cập nhật

Next Post

Cách đăng ký gói BL5GT MobiFone nhận 5GB/tháng

Related Posts

Dien Tich Tam Giac 640 1 Lập trình

Công thức tính diện tích tam giác: vuông, thường, cân, đều

26/12/2021 Huong Dan Cai Dat Node Js 640 1 Lập trình

Hướng dẫn cài đặt Node.js

26/12/2021 Cau Truc Du Lieu Hang Doi Queue 640 1 Lập trình

Cấu trúc dữ liệu hàng đợi (Queue)

26/12/2021 Hoc Css 640 8 Lập trình

Thanh điều hướng – Navigation Bar trong CSS

26/12/2021 Ms Sql Server Management Studio 640 3 Lập trình

Quản lý MS SQL Server bằng Management Studio

26/12/2021 Java Development Kit 1 Lập trình

Tải Java Development Kit 8-update-281

26/12/2021 Next Post

Cách đăng ký gói BL5GT MobiFone nhận 5GB/tháng

Bài mới nhất

Server 1

Cách thiết lập máy chủ ảo

17/02/2026 Tat Activation Lock Iphone 640 1

Cách vô hiệu hóa Activation Lock trên iPhone

17/02/2026 Cd Monitorwide 1

Những điều bạn nên biết về LCD Monitor

16/02/2026 Reset Iphone Bang Find My Iphone 640 1

Cách khôi phục cài đặt gốc iPhone trên Find My iPhone

16/02/2026 Xu Ly Loi Man Hinh Iphone Khong Nhay Cam Ung Kem 20 1

Xử lý nhanh lỗi màn hình iPhone không nhạy, cảm ứng kém

15/02/2026

Danh mục

  • Android
  • Bảo mật máy tính
  • Bảo mật, Antivirus
  • Chuyện công nghệ
  • Deep Learning
  • Development
  • Dịch vụ công trực tuyến
  • Dịch vụ nhà mạng
  • Giải pháp bảo mật
  • Hệ thống
  • Hệ thống
  • iPhone
  • Kiến thức bảo mật
  • Kiến thức cơ bản phổ thông
  • Kiến thức Marketing căn bản
  • Kiến thức tổng hợp
  • Lập trình
  • Linux
  • Linux OS
  • macOS
  • Mail Server
  • Mạng LAN – WAN
  • Máy ảo
  • Máy chủ
  • ms excel
  • ms-powerpoint
  • Nền tảng điện toán đám mây
  • Phần cứng
  • Phần Mềm
  • Quản trị hệ thống
  • Raspberry Pi
  • Sửa lỗi máy tính
  • Tăng tốc máy tính
  • Thủ thuật
  • Thủ thuật SEO
  • Thủ thuật Wifi
  • Tiện ích hệ thống
  • Tin học văn phòng
  • Tin tức
  • Uncategorized
  • Ứng dụng
  • Website
  • Windows Server 2012

Thẻ

#app #chatbot #chatbot tự động #CRM #Kiến thức cơ bản #Techblog #Thiết kế website Android apple CPU Email Marketing Google Google Drive hacker HTML hàm python hàm python có sẵn hình nền hình nền máy tính học css học python học SQL ios iphone iphone 12 iPhone X macos Microsoft mssql MS SQL Server ngôn ngữ lập trình python Raspberry Pi Samsung smartphone SQL SQL Server tham số trong C thủ thuật windows 10 tài liệu python windows windows 10 YouTube điện thoại thông minh ứng dụng
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 Pha Le Solution

No Result View All Result

© 2022 Pha Le Solution

Từ khóa » Cách Dùng Icon Trong Html