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

    132 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.

Advertisement

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

Tin tức mới

Tin tức thú vị

Nhà tài trợ: