Biểu tượng trong CSS - CSS Icons

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    4 thg 11, 2022

  • Số lượt xem

    485 lượt xem


Các icons có thể dễ dàng được thêm vào trang HTML của bạn bằng cách sử dụng thư viện icons.

Font Awesome Icons

Để sử dụng các biểu tượng Font Awesome, hãy truy cập fontawesome.com, đăng nhập và nhận code để thêm vào phần <head> của trang HTML của bạn:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Lưu ý: Không cần tải xuống hoặc cài đặt!

<!DOCTYPE html>  <html>  <head>  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></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>

 

Bootstrap Icons

Để sử dụng các glyphicons Bootstrap, hãy thêm dòng sau vào bên trong phần <head> của trang HTML của bạn:

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

Lưu ý: Không cần tải xuống 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>

 

Google Icons

Để sử dụng Google icons, hãy thêm dòng sau vào trong phần <head> của trang HTML của bạn:

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

Lưu ý: Không cần tải xuống 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>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.