Leaderboard ads banner

CSS Biểu Tượng

Cách Thêm Biểu Tượng

  • Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng, chẳng hạn như sử dụng các phông chữ tuyệt đẹp của thư viện

  • Thêm tên của lớp biểu tượng được chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như <i>hoặc <span>).

  • Tất cả các biểu tượng trong thư viện biểu tượng bên dưới, là các vectơ có thể mở rộng có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v ...)

Phông Chữ Biểu Tượng

Để sử dụng các biểu tượng phông chữ tuyệt vời, hãy thêm dòng code sau vào bên trong thẻ <head> trang HTML của bạn:

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

Lưu ý: Không cần tải xuống hoặc cài đặt, vì nó là thư viện được cung cấp sẵn nên ta chỉ việc lấy ra mà dùng thôi !

Ví dụ :

<!DOCTYPE html>
<html>
<head>
  <title>Font Awesome Icons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <p>Some Font Awesome icons:</p>
  <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>
  <p>Styled Font Awesome icons (size and color):</p>
  <i class="fa fa-cloud" style="font-size:24px;"></i>
  <i class="fa fa-cloud" style="font-size:36px;"></i>
  <i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
  <i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

Biểu Tượng Của Bootstrap

Để sử dụng glyphicons Bootstrap, hãy thêm dòng code sau vào bên trong thẻ <head> 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, vì nó là thư viện được cung cấp sẵn nên ta chỉ việc lấy ra mà dùng thôi !

Ví dụ :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Icons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">
  <p>Some Bootstrap icons:</p>
  <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>
  <br><br>
  <p>Styled Bootstrap icons (size and color):</p>
  <i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
  <i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i> 
  <i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
  <i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

Biểu Tượng Của Google

Để sử dụng các biểu tượng của Google, hãy thêm dòng code sau vào bên trong thẻ <head> của trang HTML của bạn:

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

Lưu ý: Chúng ta cũng không cần tải xuống hoặc cài đặt, vì nó là thư viện được cung cấp sẵn nên ta chỉ việc lấy ra mà dùng thôi !

Ví dụ :

<!DOCTYPE html>
<html>
<head>
  <title>Google Icons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <p>Some Google icons:</p>
  <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>
  <br><br>
  <p>Styled Google icons (size and color):</p>
  <i class="material-icons" style="font-size:24px;">cloud</i>
  <i class="material-icons" style="font-size:36px;">cloud</i>
  <i class="material-icons" style="font-size:48px;color:red;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>

Chỉ có vậy thôi, quá đơn giản phải không nào ? Qua bài viết này chúng ta đã hiểu được khái niệm và cách dùng các biểu tượng có sẵn trong CSS là như thế nào. Cảm ơn các bạn đã xem bài viết.

Để học tốt thì chúng ta phải kết hợp giữa việc học đi đôi với hành, hãy cùng nhau làm những bài tập thực hành đơn giản theo đường dẫn bên dưới nhé. Nó sẽ giúp chúng ta học tập tốt hơn nhiều đó.

https://www.codehub.vn/Hoc-CSS/CSS-bieu-tuong/challenges

Nội dung không được để trống

Hướng Dẫn Liên Quan