Icon Font là gì và cách tạo Icon Font

Thuy Nguyen

Bạn chắc chắn đã từng được nghe về các icon và các font chữ, vậy Icon Font là gì? Hôm nay, chúng tôi sẽ giới thiệu với bạn đọc định nghĩa Icon Font, tại sao nó trở nên phổ biến như vậy và cách sử dụng nó để trang web của bạn trở nên sống động hơn. Cùng bắt đầu nào.

Icon Font là gì?

Icon Font thực chất là giống với các font chữ thường - chúng xác định giao diện của một đoạn văn bản. Tuy nhiên, sự khác biệt lớn giữa 2 loại font này là Icon Font không chứa chữ cái và số, ngoại trừ các biểu tượng và icon. Bạn có thể sẽ bị nhầm lẫn và thắc mắc một font chữ không thể dùng để viết các chữ cái và số thì có gì thú vị.

Icont font chủ yếu được sử dụng để tạo phong cách cho trang web. Bởi chúng dựa trên các icon vector nên chúng có thể thay đổi kích cỡ, di chuyển, tạo kiểu và thay đổi bằng cách sử dụng CSS. Điều này cung cấp một lợi thế lớn so với các phương pháp thiết kế truyền thống như hình ảnh. Giao diện của một số lượng lớn các biểu tượng có thể được thay đổi chỉ với một vài dòng mã. Bạn không cần chỉnh sửa bất kì hình ảnh nào, mở Photoshop hay upload các tập tin mới mà chỉ cần viết code.

Ưu điểm của Icon Font là làm giảm số lượng HTTP Request, giúp website của bạn load nhanh hơn và dễ dàng thay đổi màu sắc, kích thước của icon.

Cách tạo các Icon Font

Tôi sẽ sử dụng Font Awesome cho những ví dụ này, bạn cũng có thể áp dụng chúng cho những gói font khác.

Cùng bắt đầu với file HTML sau:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>MUO Icon Fonts</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			html {
				font-family: helvetica, arial;
			}
		</style>
	</head>
	<body>

	</body>
</html>

Đây là lượng HTML tối thiểu cần thiết để tạo một trang web. Tuy nhiên, dòng lệnh quan trọng nhất là:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Thao tác này sẽ tải stylesheet Font Awesome từ CDN của nó. Nếu không có dòng lệnh này, trang web của bạn sẽ không biết Font Awesome là gì, do đó, lệnh này rất quan trọng. Stylesheet này sẽ xử lý tất cả các công việc khó khăn trong việc nhúng web font và có tác dụng khiến mọi thứ trở nên dễ dàng hơn.

Các biểu tượng Font Awesome được xác định bởi các CSS class (lớp CSS) thêm vào thẻ i. Chúng được chọn bởi chúng không có trình duyệt hoặc các kiểu được mặc định nào gắn liền với chúng, vì thế các icon của bạn sẽ không bị lộn xộn. Ngoài ra, bạn có thể thêm các class vào thẻ span, tuy nhiên điều này sẽ đảo lộn HTML của bạn.

Dưới đây là cách sử dụng cơ bản. Đặt nó bên trong thẻ body của bạn:

<i class="fa fa-cog"></i> My First Icon

Nó trông sẽ như thế này:

My First Icon

Có hai class cần thiết cho Font Awesome hoạt động. Class đầu tiên được gọi là fa, viết tắt của Font Awesome. Class này cần thiết cho tất cả các icon, bất kể icon nào mà bạn sử dụng. Class thứ hai chỉ định icon cụ thể mà bạn muốn sử dụng. Class này cũng là tiền tố của fa và bởi nó là biểu tượng răng cưa nên được gọi là fa-cog. Bạn có thể xem danh sách tất cả các icon trong Font Awesome trên trang web của họ.

Thử thay đổi icon từ cog sang bất cứ cái nào khác xem sao.

Tìm hiểu kĩ hơn

Khi bạn đã biết những điều cơ bản, đây là lúc để chúng ta cùng tìm hiểu sâu hơn.

Nếu bạn không muốn viết CSS của riêng mình, bạn có thể sử dụng các kiểu được xây dựng ngay trong Font Awesome. Bạn có thể sử dụng nhiều class để làm cho các biểu tượng lớn hơn:

<i class="fa fa-battery-0 fa-lg"></i>
<i class="fa fa-battery-1 fa-2x"></i>
<i class="fa fa-battery-2 fa-3x"></i>
<i class="fa fa-battery-3 fa-4x"></i>
<i class="fa fa-battery-4 fa-5x"></i>

Làm cho biểu tượng pin lớn hơn

Bạn có thể sử dụng một class hữu ích khác, đó là fa-spin. Class này sẽ làm các icon của bạn xoay và khi được kết hợp với các class trước đó, bạn có thể tạo một số hiệu ứng đẹp mắt. Dưới đây là code:

<i class="fa fa-refresh fa-spin fa-3x"></i>

Sau khi nhập code, bạn sẽ nhận được kết quả như hình:

Icon xoay

Thật dễ dàng để xoay các icon - sử dụng class fa-rotate:

<i class="fa fa-envelope-o fa-3x"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-90"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-180"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-270"></i>

Số ở cuối định nghĩa độ xoay cho icon nhưng không di chuyển được. Bạn được giới hạn ở mức 90, 180 hoặc 270 độ.

Xoay icon hộp thư

Thủ thuật cuối cùng bạn có thể làm là xếp chồng các icon lên nhau. Class fa-stack cho phép bạn kết hợp hai hoặc nhiều icon lại với nhau. Dưới đây là code:

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-eyedropper fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-cutlery fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-glass fa-stack-1x"></i>
</span>

Sau khi nhập code, bạn sẽ được kết quả như sau:

Kết hợp các icon

Khi bạn bắt đầu kết hợp tất cả các class lại với nhau, khả năng sáng tạo thực sự là vô tận.

Tùy chỉnh CSS

Bởi vì các Icon Font chỉ là font chữ, nên bạn có thể định dạng chúng với CSS giống như bất kì yếu tố nào khác. Sử dụng CSS3 để tạo các icon chuyển động:

Hình động xe đạp

Dưới đây là HTML cho icon trên:

<i class="fa fa-motorcycle fa-5x bike"></i>

Đây là CSS:

@keyframes move {
  from { margin-left: 0; }
  to { margin-left: 400px; }
}

.bike {
  animation-name: move;
  animation-duration: 4s;
}

CSS này khá cơ bản nhưng lại mang tới tác động lớn.

Bạn có thể tạo một số thứ đặc biệt nếu muốn:

Tạo icon đặc biệt

Thao tác này sẽ lặp lại một chút để giảm kích thước tập tin trên trang web. Dưới đây là HTML:

<i class="fa fa-user-circle person fa-5x" id="p1"></i>
<i class="fa fa-user-circle person fa-5x" id="p2"></i>
<i class="fa fa-user-circle person fa-5x" id="p3"></i>
<i class="fa fa-user-circle person fa-5x" id="p4"></i>

Dưới đây là CSS:

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.person {
  opacity: 0;
  animation-name: fade;
}

#p1 {
  color: red;
  animation-duration: 2s;
}
#p2 {
  color: orange;
  animation-duration: 4s;
}
#p3 {
  color: green;
  animation-duration: 6s;
}
#p4 {
  animation-duration: 8s;
}

Giống như ví dụ trước, ví dụ này sử dụng hiệu ứng CSS3. Một hiệu ứng có tên fade được tạo ra và mỗi icon thực hiện hiệu ứng này với thời gian khác nhau. Bạn có thể thỏa sức sáng tạo với các icon đó và CSS3.

Đó là tất cả những điều tôi muốn giới thiệu ngày hôm nay. Bây giờ, bạn có thể sử dụng các Icon Font để làm các trang web của mình trở nên sống động hơn rồi đấy.

Icon Font yêu thích của bạn là gì? Bạn có thấy bài viết này hữu ích không? Hãy cho chúng tôi biết bằng cách comment bên dưới nhé!

Thứ Tư, 21/06/2017 15:18

5 ★ 5 👨 3.787