5 tháng 11, 2019

Cách chèn icon trong CSS

Icon không chỉ giúp biểu đặt cảm xúc rõ ràng khi nhắn tin mà còn giúp cho trang Web trở nên sinh động hơn, tạo thiện cảm cho người xem. Trong lập trình Web, các lập trình viên cũng thường chèn icon vào trang Web để trang trí. Cách nhanh nhất để chèn đó là tận dụng các thư viện icon. Trong phần <head>, chúng ta sẽ khai báo liên kết với thư viện và sau đó chèn icon vào bất kỳ phần tử nào trong phần <body>. Thư viện mà mình hay dùng đó là Font AwesomeBootstrap IconGoogle Icon. Icon trong các thư viện này rất đa dạng, phong phú, hình ảnh khá bắt mắt với nhiều chủng loại, kích thước, màu sắc khác nhau.


Để chèn được icon vào trang web thì trong phần <head>, bạn cần thêm dòng sau: 
<link rel="stylesheet" href="Đường link thư viện icon css">

1. Chèn icon của Font Awesome

Ví dụ: 
<!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ả: 

2. Chèn icon của Bootstrap

Ví dụ:
<!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ả: 

3. Chèn icon của Google

Ví dụ:
<!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>

Kết quả: 
Lời kết: Việc chèn icon rất đơn giản, chỉ cần khai báo thư viện là xong, không cần phải tải hay cài đặt gì cả. Cách làm thì đơn giản nhưng lại khiến cho trang web trở nên sinh động hơn rất nhiều, gây thiện cảm cho người hơn rất nhiều.


SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!