Chèn icon vào HTML là một việc làm có thể tăng độ bắt mắt và kích thích người dùng tham quan website của bạn. Ở bài viết này, Stringee và các bạn sẽ cùng nhau tìm hiểu cách dùng CSS để thêm nó vào HTML với thư viện icon nhé.

1. Icon font trong CSS là gì?

Ảnh bitmap sẽ hiển thị không tốt khi nó bị thay đổi kích thước, chúng ta sẽ thấy ảnh sẽ bị vỡ khi phóng to và mất chi tiết khi thu nhỏ và mỗi ảnh chúng ta sẽ cần load lại một lần. Điều này cũng có thể là một yếu tố góp phần làm giảm tốc độ load website của bạn.

Để luôn hiển thị được các ảnh bitmap đẹp chúng ta sẽ cần design rất nhiều ảnh, vốn dĩ là một việc rất tốn thời gian. Chúng ta có thể sử dụng font để giải quyết vấn đề này, với font chúng ta có thể thoải mái phóng to và thu nhỏ mà không cần load lại ảnh cũng như phải thiết kế nhiều icon như vậy. 

Icon font là cách thức dùng những font chữ được thiết kế đặc biệt để thay thế cho các hình ảnh được dùng trong việc thiết kế website, đặc biệt với những website hỗ trợ responsive thì điều này càng cần thiết vì khi đó các hình ảnh cần có kích thước khác nhau trên các thiết bị khác nhau và nếu chỉ dùng một hình ảnh thì sẽ không thể tạo được sự sắc nét khi hiển thị với nhiều kích thước và icon font ra đời để khắc phục nhược điểm này.

2. Cách thêm icon vào trang web

Cách đơn giản nhất để thêm icon (biểu tượng) vào trang HTML là dùng thư viện biểu tượng. như Font Awesome, chỉ cần thêm tên của lớp icon đó vào bất kì phần tử HTML nội dòng nào (như <i> hay <span>). Tất cả những icon trong thư viện icon dưới đây đều thuộc dạng vector có thể phóng to (scale) trong CSS (kích thước, màu sắc, bóng…)

Để dùng bất cứ icon font nào, chúng ta có thể nhúng chúng vào website site của mình và điền nó vào một thẻ bất kỳ như ví dụ dưới đây:

<!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>

>>> Xem thêm bài viết:

- Hướng dẫn cài đặt unix linux 

- Hướng dẫn cài đặt k8s Kubenertes Cluster

- Scheduling - Lập lịch trên K8s

3. Một vài thư viện icon phổ biến

3.1. Font Awesome Icon

Để dùng icon của Font Awesome, thêm dòng dưới đây vào phần <head> trong trang HTML. Bạn không cần phải tải hay cài đặt gì cả.

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

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>

3.2. Bootstrap Icon

Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần <head> trong trang HTML.

<!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>

Các icon sẽ hiển thị là

3.3. Google Icon

Để dùng icon của Google, chúng ta cũng sẽ sử dụng chung công thức như hai thư viện trên

<!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

Hy vọng bài viết này đã cung cấp cho bạn những thông tin hữu ích về icon trong CSS. Hãy tiếp tục khám phá và sáng tạo để tạo ra những giao diện web ấn tượng và thu hút!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: