Cách dùng CSS Icons

Chào các bạn! Ngày nay thiết kế web ngày càng phát triển và ngày càng có nhiều kỹ thuật mới được sử dụng, một trong những kỹ thuật khá hay đó là dùng css icons. Khái niệm chắc các bạn đã từng nghe và sử dụng. Tuy nhiên, bạn dùng tới nó nhưng bạn đã hiểu về khái niệm thực sự của nó là gì chưa? Và những ưu điểm, lợi ích mà css icons mang lại khi sử dụng nó là gì? Bài viết này mình sẽ nói một cách cụ thể hơn nhé.

Cách thêm icon

Cách đơn giản nhất để thêm icon vào một phần tử html là sử dụng thư viện của chúng. Như Font Awesome, chỉ cần thêm tên icon đó vào bất cứ thành phần HTML nội dòng nào. Tất cả những icon trong thư viện icon đều thuộc dạng vector có thể phóng to (scale) trong CSS (kích thước, màu sắc, bóng…)

Font Awesome

Để có thể dùng icon của Font Awesome ta cần thêm dòng dưới đây vào phần head trong trang HTML.

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

VÍ dụ icon bằng Font Awesome

<!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="fab fa-500px"></i>
<i class="fas fa-american-sign-language-interpreting"></i>
<i class="fab fa-angellist"></i>
<i class="fab fa-app-store-ios"></i>
<i class="fas fa-arrow-square-up"></i>

</body>
</html>

Bootstrap Icon

Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần <haed> trong trang HTML. Cách này cũng không cần tải hay cài đặt gì.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">

Ví dụ icon với Bootstrap

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

Để có thể dùng google Icon, ta thêm dòng dưới đây vào phần <head>trong trang HTML. Cũng giống 2 cách trên, bạn không cần tải hay cài đặt gì cả.

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

VÍ dụ về cách dùng Google Icon

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

Bạn có thể xem thêm:

CSS Transitions

CSS 3D Transforms

CSS Tables

CSS Border Images

Lời kết

Bài học của mình hôm nay đến đây kết thúc rồi. Xin chào vào hẹn gặp các bạn trong các seri tiếp theo nhé. Chúc các bạn có một ngày làm việc vui vẻ.

Để tìm hiểu thêm các kiến thức về lập trình web bạn có thể xem thêm tại debug1s.com.

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *