Thêm Icon Trong CSS - Code 24h

Trang chủ » Cách Thêm Icon Vào Html » Thêm Icon Trong CSS - Code 24h

Có thể bạn quan tâm

Cách đơn giản nhất để thêm icon vào trang HTML của bạn đó là dùng thư viện icon, giống như Font Awesome. Thêm tên của lớp icon vào bên trong phần tử HTML (như <i> hoặc <span>). Dưới đây là tổng hợp tất cả thư viện icon mà bạn có thể sử dụng, bao gồm cả dạng vector cho bạn tùy chỉnh CSS (kích thước, màu sắc, đổ bóng…).

Font Awesome Icons

Để sử dụng Font Awesome icon, thêm đoạn mã dưới đây vào bên trong thẻ <head> của trang HTML:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Lưu ý: không khuyến nghị tải về hoặc cài đặt icon.

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

Kết quả là:

Bootstrap Icons

Để sử dụng Bootstrap icon, thêm dòng mã dưới đây bên trong thẻ <head> của trang HTML:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

Lưu ý: không khuyến nghị tải về hoặc cài đặt.

<!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ả là:

Google Icons

Để sử dụng Google icon, thêm dòng mã dưới đây vào bên trong thẻ <head> của trang HTML:

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

Lưu ý: không khuyến nghị tải về hoặc cài đặt.

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

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z

Từ khóa » Cách Thêm Icon Vào Html