Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của lethach.com. Hôm nay mình rất vui khi được viết bài viết này, tuy nó đơn giản nhưng nó rất quan trọng bởi vì hiện nay khi thiết kế web thì các trang web đều dùng các biểu tượng trong CSS.
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
<!DOCTYPE html> <html> <head> <title>Phông chữ biểu tượng</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>Một vài phông chữ biểu tượng</p> <span class="fa fa-cloud"></span> <span class="fa fa-heart"></span> <span class="fa fa-car"></span> <span class="fa fa-file"></span> <span class="fa fa-bars"></span> <p>CSS thêm cho nó về kích cỡ và màu sắc </p> <span class="fa fa-cloud" style="font-size:24px;"></span> <span class="fa fa-cloud" style="font-size:36px;"></span> <span class="fa fa-cloud" style="font-size:48px;color:red;"></span> <span class="fa fa-cloud" style="font-size:60px;color:lightblue;"></span> </body> </html>
Kết quả là:
Một vài phông chữ biểu tượng
CSS thêm cho nó về kích cỡ và màu sắc
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">
Ví dụ :
<!DOCTYPE html> <html> <head> <title>Biểu tượng Bootstrap </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>Một vài biểu tượng Bootstrap </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>CSS thêm cho nó về kích cỡ và màu sắc </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>
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 !
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">
Ví dụ :
<!DOCTYPE html> <html> <head> <title>Biểu tượng GOOGLE</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>Một vài biểu tượng GOOGLE:</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>CSS thêm cho nó về kích cỡ và màu sắc </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>
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 !
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. Nếu có thắc mắc hoặc góp ý nào hãy comment ở phía dưới bài viết.
