Biểu tượng phông chữ tuyệt vời

Thư viện biểu tượng Font Awesome cung cấp 519 biểu tượng vector có thể mở rộng miễn phí. Thư viện này hoàn toàn miễn phí cho cả mục đích sử dụng cá nhân và thương mại. Ban đầu được thiết kế cho Bootstrap, các biểu tượng này có thể được tùy chỉnh dễ dàng.

Tải Thư viện Phông chữ

Để tải thư viện Font Awesome, hãy sao chép và dán dòng sau vào phần <head> của trang web.

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

Sử dụng biểu tượng

Font Awesome cung cấp một số biểu tượng. Chọn một trong số chúng và thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nào trong thẻ <body>. Trong ví dụ sau, chúng tôi đã sử dụng biểu tượng của đơn vị tiền tệ Ấn Độ.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Nó sẽ tạo ra kết quả sau:

Xác định kích thước

Bạn có thể tăng hoặc giảm kích thước của một biểu tượng bằng cách xác định kích thước của nó bằng CSS và sử dụng nó cùng với tên lớp, như được hiển thị bên dưới. Trong ví dụ đã cho, chúng tôi đã khai báo kích thước là 6 em.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Nó sẽ tạo ra kết quả sau:

Xác định màu sắc

Cũng giống như kích thước, bạn có thể xác định màu sắc của các biểu tượng bằng cách sử dụng CSS. Ví dụ sau đây cho thấy cách thay đổi màu của biểu tượng tiền tệ Ấn Độ.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Danh sách các loại

Font Awesome cung cấp 519 biểu tượng trong các danh mục sau:

Biểu tượng ứng dụng web
Biểu tượng bàn tay
Biểu tượng giao thông vận tải
Biểu tượng giới tính
Biểu tượng loại tệp
Biểu tượng Spinner
Biểu tượng kiểm soát biểu mẫu
Biểu tượng thanh toán
Biểu tượng biểu đồ
Biểu tượng tiền tệ
Biểu tượng trình soạn thảo văn bản
Biểu tượng định hướng
Biểu tượng trình phát video
Biểu tượng thương hiệu

Để sử dụng bất kỳ biểu tượng nào trong số các biểu tượng này, bạn phải thay thế tên lớp trong các chương trình được cung cấp trong chương này bằng tên lớp của biểu tượng mong muốn. Trong các chương tiếp theo của Phần này (Font Awesome), chúng tôi đã giải thích theo thể loại cách sử dụng và kết quả đầu ra tương ứng của các biểu tượng Font Awesome khác nhau.