Biểu tượng Web - Hướng dẫn Nhanh

Biểu tượng là một biểu tượng được sử dụng để thể hiện một hành động cụ thể hoặc một khả năng trên trang web. Các biểu tượng được sử dụng trong các tài liệu cũng như ứng dụng và chúng có thể được chọn hoặc không chọn được. Ví dụ: hình ảnh mà chúng ta thấy trên các nút của ứng dụng đều là biểu tượng và các nút này có thể chọn được. Tương tự, khi chúng tôi sử dụng một biểu tượng làm biểu trưng của công ty, nó thường không thể chọn được.

Trong môi trường Windows, nếu chúng ta tắt âm lượng hệ thống, nó sẽ được hiển thị với sự trợ giúp của một biểu tượng, như hình dưới đây.

Sử dụng các biểu tượng web, chúng ta có thể đại diện cho một trang đang tải, một tùy chọn bị vô hiệu hóa, một liên kết, một chuyển hướng, v.v. Những biểu tượng này có thể được lật, xoay, thay đổi kích thước, viền, đảo ngược và tô màu.

Phông chữ Biểu tượng

Biểu tượng Phông chữ chứa các biểu tượng và glyph. Khi bạn tải một phông chữ mong muốn, bạn có thể sử dụng bất kỳ biểu tượng nào được cung cấp bởi phông chữ đó bằng cách sử dụng tên lớp của biểu tượng. Chúng tôi cũng có thể áp dụng các màu khác nhau cho các biểu tượng và thay đổi kích thước của chúng bằng cách sử dụng các thuộc tính CSS. Có một số thư viện biểu tượng (phông chữ) cung cấp các biểu tượng. Hướng dẫn này tập trung vào ba phông chữ chính, đó là -

Phông chữ tuyệt vời
Bootstrap Glyphicons
Biểu tượng tài liệu của Google

Phông chữ tuyệt vời

Phông chữ này 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 cũng như thương mại. Các biểu tượng này có thể được tùy chỉnh dễ dàng. Ban đầu, chúng được phát triển cho Bootstrap.

Bootstrap Glyphicons

Đây là thư viện các biểu tượng đơn sắc có sẵn ở định dạng ảnh raster, định dạng ảnh vectơ và dưới dạng phông chữ. Nó cung cấp hơn 250 glyphs ở định dạng phông chữ. Bạn có thể sử dụng các phông chữ này trong các dự án web của mình. Các biểu tượng này không miễn phí, tuy nhiên bạn có thể sử dụng chúng trong các dự án dựa trên Bootstrap mà không cần phải mua chúng.

Biểu tượng tài liệu của Google

Google cung cấp khoảng 750 biểu tượng được thiết kế theo "nguyên tắc material design" và những biểu tượng này được gọi là Material Designcác biểu tượng. Các biểu tượng này đơn giản và chúng hỗ trợ tất cả các trình duyệt web hiện đại. Vì các biểu tượng này dựa trên vector nên chúng cũng có thể mở rộng. Để sử dụng các biểu tượng này, chúng ta phải tải phông chữ (thư viện)material-icons.

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ố 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.

Chương này giải thích cách sử dụng các biểu tượng Ứng dụng Web Font Awesome. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Ứng dụng Web Font Awesome. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-Adjust custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-archive custom"> </i>
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-h custom"> </i>
<i class = "fa fa-arrows-v custom"> </i>
<i class = "fa fa-asterisk custom"> </i>
<i class = "fa fa-at custom"> </i>
<i class = "fa fa-ô tô custom"> </i>
<i class = "fa fa-balance-scale custom"> </i>
<i class = "fa fa-ban custom"> </i>
<i class = "fa fa-bank custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o custom"> </i>
<i class = "fa fa-barcode custom"> </i>
<i class = "fa fa-bar custom"> </i>
<i class = "fa fa-bed custom"> </i>
<i class = "fa fa-beer custom"> </i>
<i class = "fa fa-bell custom"> </i>
<i class = "fa fa-wrench custom"> </i>
<i class = "fa fa-bell-o custom"> </i>
<i class = "fa fa-bell-slash custom"> </i>
<i class = "fa fa-bell-slash-o custom"> </i>
<i class = "fa fa-bike custom"> </i>
<i class = "fa fa-pin-0 custom"> </i>
<i class = "fa fa-pin-1 custom"> </i>
<i class = "fa fa-pin-2 custom"> </i>
<i class = "fa fa-pin-3 custom"> </i>
<i class = "fa fa-pin-4 custom"> </i>
<i class = "fa fa-pin-blank custom"> </i>
<i class = "fa fa-pin-quý tùy chỉnh"> </i>
<i class = "fa fa-pin-half custom"> </i>
<i class = "fa fa-pin-3/4 tùy chỉnh"> </i>
<i class = "fa fa-pin-full custom"> </i>
<i class = "fa fa-birthday-cake custom"> </i>
<i class = "fa fa-bolt custom"> </i>
<i class = "fa fa-bomb custom"> </i>
<i class = "fa fa-book custom"> </i>
<i class = "fa fa-bookmark custom"> </i>
<i class = "fa fa-bookmark-o custom"> </i>
<i class = "fa fa-cặp tùy chỉnh"> </i>
<i class = "fa fa-bug custom"> </i>
<i class = "fa fa-building custom"> </i>
<i class = "fa fa-building-o custom"> </i>
<i class = "fa fa-bullhorn custom"> </i>
<i class = "fa fa-bullseye custom"> </i>
<i class = "fa fa-bus custom"> </i>
<i class = "fa fa-cab custom"> </i>
<i class = "fa fa-video-camera custom"> </i>
<i class = "fa fa-calendar custom"> </i>
<i class = "fa fa-calendar-check-o custom"> </i>
<i class = "fa fa-calendar-trừ-o tùy chỉnh"> </i>
<i class = "fa fa-calendar-o custom"> </i>
<i class = "fa fa-calendar-plus-o custom"> </i>
<i class = "fa fa-calendar-times-o custom"> </i>
<i class = "fa fa-camera custom"> </i>
<i class = "fa fa-camera-retro custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-cc custom"> </i>
<i class = "fa fa-caret-square-o-down custom"> </i>
<i class = "fa fa-caret-square-o-left custom"> </i>
<i class = "fa fa-caret-square-o-right custom"> </i>
<i class = "fa fa-caret-square-o-up custom"> </i>
<i class = "fa fa-cart-arrow-down custom"> </i>
<i class = "fa fa-cart-plus custom"> </i>
<i class = "fa fa-certificate custom"> </i>
<i class = "fa fa-child custom"> </i>
<i class = "fa fa-check custom"> </i>
<i class = "fa fa-check-circle custom"> </i>
<i class = "fa fa-check-circle-o custom"> </i>
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle custom"> </i>
<i class = "fa fa-circle-o custom"> </i>
<i class = "fa fa-circle-o-notch custom"> </i>
<i class = "fa fa-circle-thin custom"> </i>
<i class = "fa fa-clock-o custom"> </i>
<i class = "fa fa-clone custom"> </i>
<i class = "fa fa-close custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-cloud-download custom"> </i>
<i class = "fa fa-cloud-upload custom"> </i>
<i class = "fa fa-code custom"> </i>
<i class = "fa fa-code-fork custom"> </i>
<i class = "fa fa-coffee custom"> </i>
<i class = "fa fa-cog custom"> </i>
<i class = "fa fa-cogs custom"> </i>
<i class = "fa fa-comment custom"> </i>
<i class = "fa fa-comment-o custom"> </i>
<i class = "fa fa-comment custom"> </i>
<i class = "fa fa-comment-o custom"> </i>
<i class = "fa fa-comments custom"> </i>
<i class = "fa fa-comments-o custom"> </i>
<i class = "fa fa-la bàn tùy chỉnh"> </i>
<i class = "fa fa-copyright custom"> </i>
<i class = "fa fa-creative-commons custom"> </i>
<i class = "fa fa-credit-card custom"> </i>
<i class = "fa fa-crop custom"> </i>
<i class = "fa fa-crosshairs custom"> </i>
<i class = "fa fa-cube custom"> </i>
<i class = "fa fa-cubes custom"> </i>
<i class = "fa fa-dao kéo custom"> </i>
<i class = "fa fa-dashboard custom"> </i>
<i class = "fa fa-database custom"> </i>
<i class = "fa fa-desktop custom"> </i>
<i class = "fa fa-diamond custom"> </i>
<i class = "fa fa-dot-circle-o custom"> </i>
<i class = "fa fa-download custom"> </i>
<i class = "fa fa-edit custom"> </i>
<i class = "fa fa-ellipsis-h custom"> </i>
<i class = "fa fa-ellipsis-v custom"> </i>
<i class = "fa fa-phong bì tùy chỉnh"> </i>
<i class = "fa fa-phong bì-o custom"> </i>
<i class = "fa fa-phong bì-vuông tùy chỉnh"> </i>
<i class = "fa fa-eraser custom"> </i>
<i class = "fa fa-exchange custom"> </i>
<i class = "fa fa-exclamation custom"> </i>
<i class = "fa fa-exclamation-circle custom"> </i>
<i class = "fa fa-exclamation-tam giác tùy chỉnh"> </i>
<i class = "fa fa-external-link custom"> </i>
<i class = "fa fa-external-link-square custom"> </i>
<i class = "fa fa-eye custom"> </i>
<i class = "fa fa-eye-slash custom"> </i>
<i class = "fa fa-eyesropper custom"> </i>
<i class = "fa fa-fax custom"> </i>
<i class = "fa fa-feed custom"> </i>
<i class = "fa fa-Female custom"> </i>
<i class = "fa fa-Fight-jet custom"> </i>
<i class = "fa fa-file-archive-o custom"> </i>
<i class = "fa fa-file-audio-o custom"> </i>
<i class = "fa fa-file-code-o custom"> </i>
<i class = "fa fa-file-excel-o custom"> </i>
<i class = "fa fa-volume-down custom"> </i>
<i class = "fa fa-file-movie-o custom"> </i>
<i class = "fa fa-file-pdf-o custom"> </i>
<i class = "fa fa-file-photo-o custom"> </i>
<i class = "fa fa-file-picture-o custom"> </i>
<i class = "fa fa-file-powerpoint-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-zip-o custom"> </i>
<i class = "fa fa-film custom"> </i>
<i class = "fa fa-filter custom"> </i>
<i class = "fa fa-fire custom"> </i>
<i class = "fa fa-fire-fire-fire custom custom"> </i>
<i class = "fa fa-flag custom"> </i>
<i class = "fa fa-flag-checkered custom"> </i>
<i class = "fa fa-flag-o custom"> </i>
<i class = "fa fa-flash custom"> </i>
<i class = "fa fa-flask custom"> </i>
<i class = "fa fa-flask custom"> </i>
<i class = "fa fa-folder custom"> </i>
<i class = "fa fa-folder-o custom"> </i>
<i class = "fa fa-folder-open custom"> </i>
<i class = "fa fa-folder-open-o custom"> </i>
<i class = "fa fa-frown-o custom"> </i>
<i class = "fa fa-volume-off custom"> </i>
<i class = "fa fa-gamepad custom"> </i>
<i class = "fa fa-gavel custom"> </i>
<i class = "fa fa-gear custom"> </i>
<i class = "fa fa-gears custom"> </i>
<i class = "fa fa-gift custom"> </i>
<i class = "fa fa-glass custom"> </i>
<i class = "fa fa-global custom"> </i>
<i class = "fa fa-Grad-cap custom"> </i>
<i class = "fa fa-group custom"> </i>
<i class = "fa fa-hand-grab-o custom"> </i>
<i class = "fa fa-hand-lizard-o custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hand-peace-o custom"> </i>
<i class = "fa fa-hand-pointer-o custom"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-pull-o custom"> </i>
<i class = "fa fa-hand-spock-o custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hdd-o custom"> </i>
<i class = "fa fa-headphone custom"> </i>
<i class = "fa fa-heart custom"> </i>
<i class = "fa fa-heart-o custom"> </i>
<i class = "fa fa-heartbeat custom"> </i>
<i class = "fa fa-history custom"> </i>
<i class = "fa fa-home custom"> </i>
<i class = "fa fa-hotel custom"> </i>
<i class = "fa fa-hourglass custom"> </i>
<i class = "fa fa-hourglass-start custom"> </i>
<i class = "fa fa-watchglass-half custom"> </i>
<i class = "fa fa-hourglass-end custom"> </i>
<i class = "fa fa-i-cursor custom"> </i>
<i class = "fa fa-image custom"> </i>
<i class = "fa fa-inbox custom"> </i>
<i class = "fa fa-Industry custom"> </i>
<i class = "fa fa-info custom"> </i>
<i class = "fa fa-info-circle custom"> </i>
<i class = "fa fa-sports custom"> </i>
<i class = "fa fa-key custom"> </i>
<i class = "fa fa-keyboard-o custom"> </i>
<i class = "fa fa-language custom"> </i>
<i class = "fa fa-laptop custom"> </i>
<i class = "fa fa-leaf custom"> </i>
<i class = "fa fa-legal custom"> </i>
<i class = "fa fa-chanh-o custom"> </i>
<i class = "fa fa-level-down custom"> </i>
<i class = "fa fa-level-up custom"> </i>
<i class = "fa fa-life-bouy custom"> </i>
<i class = "fa fa-life-ring custom"> </i>
<i class = "fa fa-life-saver custom"> </i>
<i class = "fa fa-lightbulb-o custom"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-location-arrow custom"> </i>
<i class = "fa fa-lock custom"> </i>
<i class = "fa fa-magic custom"> </i>
<i class = "fa fa-magnet custom"> </i>
<i class = "fa fa-mail-forward custom"> </i>
<i class = "fa fa-mail-reply custom"> </i>
<i class = "fa fa-mail-reply-all custom"> </i>
<i class = "fa fa-male custom"> </i>
<i class = "fa fa-map custom"> </i>
<i class = "fa fa-map-marker custom"> </i>
<i class = "fa fa-map-o custom"> </i>
<i class = "fa fa-map-pin custom"> </i>
<i class = "fa fa-map-Sign custom"> </i>
<i class = "fa fa-meh-o custom"> </i>
<i class = "fa fa-micro custom"> </i>
<i class = "fa fa-micro-slash custom"> </i>
<i class = "fa fa-trừ custom"> </i>
<i class = "fa fa-trừ-circle custom"> </i>
<i class = "fa fa-trừ-vuông tùy chỉnh"> </i>
<i class = "fa fa-trừ-square-o custom"> </i>
<i class = "fa fa-mobile custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-moon-o custom"> </i>
<i class = "fa fa-mort-board custom"> </i>
<i class = "fa fa-moto custom"> </i>
<i class = "fa fa-mouse-pointer custom"> </i>
<i class = "fa fa-music custom"> </i>
<i class = "fa fa-users custom"> </i>
<i class = "fa fa-object-group custom"> </i>
<i class = "fa fa-object-ungroup custom"> </i>
<i class = "fa fa-paint-brush custom"> </i>
<i class = "fa fa-paper-plane custom"> </i>
<i class = "fa fa-paper-plane-o custom"> </i>
<i class = "fa fa-paw custom"> </i>
<i class = "fa fa-pencil custom"> </i>
<i class = "fa fa-pencil-square custom"> </i>
<i class = "fa fa-pencil-square-o custom"> </i>
<i class = "fa fa-phone custom"> </i>
<i class = "fa fa-phone custom"> </i>
<i class = "fa fa-photo custom"> </i>
<i class = "fa fa-picture-o custom"> </i>
<i class = "fa fa-pie-chart custom"> </i>
<i class = "fa fa-plane custom"> </i>
<i class = "fa fa-volume-up custom"> </i>
<i class = "fa fa-plus custom"> </i>
<i class = "fa fa-plus-circle custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o custom"> </i>
<i class = "fa fa-power-off custom"> </i>
<i class = "fa fa-print custom"> </i>
<i class = "fa fa-puzzle-piece custom"> </i>
<i class = "fa fa-qrcode custom"> </i>
<i class = "fa fa-question custom"> </i>
<i class = "fa fa-question-circle custom"> </i>
<i class = "fa fa-quote-left custom"> </i>
<i class = "fa fa-quote-right custom"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-recycle custom"> </i>
<i class = "fa fa-refresh custom"> </i>
<i class = "fa fa-register custom"> </i>
<i class = "fa fa-remove custom"> </i>
<i class = "fa fa-reorder custom"> </i>
<i class = "fa fa-reply custom"> </i>
<i class = "fa fa-reply-all custom"> </i>
<i class = "fa fa-retweet custom"> </i>
<i class = "fa fa-road custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-rss custom"> </i>
<i class = "fa fa-rss-square custom"> </i>
<i class = "fa fa-search custom"> </i>
<i class = "fa fa-search-trừ custom"> </i>
<i class = "fa fa-search-plus custom"> </i>
<i class = "fa fa-send custom"> </i>
<i class = "fa fa-send-o custom"> </i>
<i class = "fa fa-server custom"> </i>
<i class = "fa fa-share custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square custom"> </i>
<i class = "fa fa-share-alt-o custom"> </i>
<i class = "fa fa-Shield custom"> </i>
<i class = "fa fa-ship custom"> </i>
<i class = "fa fa-shopping-cart custom"> </i>
<i class = "fa fa-sign-in custom"> </i>
<i class = "fa fa-sign-out custom"> </i>
<i class = "fa fa-signal custom"> </i>
<i class = "fa fa-sitemap custom"> </i>
<i class = "fa fa-sliders custom"> </i>
<i class = "fa fa-smile-o custom"> </i>
<i class = "fa fa-warning custom"> </i>
<i class = "fa fa-sort custom"> </i>
<i class = "fa fa-sort-alpha-asc custom"> </i>
<i class = "fa fa-sort-alpha-desc custom"> </i>
<i class = "fa fa-sort-asc custom"> </i>
<i class = "fa fa-sort-desc custom"> </i>
<i class = "fa fa-sort-down custom"> </i>
<i class = "fa fa-sort-numeric-asc custom"> </i>
<i class = "fa fa-sort-numeric-desc custom"> </i>
<i class = "fa fa-sort-up custom"> </i>
<i class = "fa fa-space-thoi custom"> </i>
<i class = "fa fa-spinner custom"> </i>
<i class = "fa fa-thìa custom"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o custom"> </i>
<i class = "fa fa-star custom"> </i>
<i class = "fa fa-star-half custom"> </i>
<i class = "fa fa-star-half-blank custom"> </i>
<i class = "fa fa-star-half-full custom"> </i>
<i class = "fa fa-star-half-o custom"> </i>
<i class = "fa fa-star-o custom"> </i>
<i class = "fa fa-stick-note custom"> </i>
<i class = "fa fa-stick-note-o custom"> </i>
<i class = "fa fa-street-view custom"> </i>
<i class = "fa fa-vali custom"> </i>
<i class = "fa fa-sun-o custom"> </i>
<i class = "fa fa-support custom"> </i>
<i class = "fa fa-tablet custom"> </i>
<i class = "fa fa-tachometer custom"> </i>
<i class = "fa fa-tag custom"> </i>
<i class = "fa fa-tags custom"> </i>
<i class = "fa fa-task custom"> </i>
<i class = "fa fa-taxi custom"> </i>
<i class = "fa fa-TV custom"> </i>
<i class = "fa fa-terminal custom"> </i>
<i class = "fa fa-thumb-tack custom"> </i>
<i class = "fa fa-thumbs-down custom"> </i>
<i class = "fa fa-ticket custom"> </i>
<i class = "fa fa-times custom"> </i>
<i class = "fa fa-times-circle custom"> </i>
<i class = "fa fa-times-circle-o custom"> </i>
<i class = "fa fa-tint custom"> </i>
<i class = "fa fa-toggle-down custom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-off custom"> </i>
<i class = "fa fa-toggle-on custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-brand custom"> </i>
<i class = "fa fa-tras custom"> </i>
<i class = "fa fa-bin-o custom"> </i>
<i class = "fa fa-tree custom"> </i>
<i class = "fa fa-cup custom"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>
<i class = "fa fa-tv custom"> </i>
<i class = "fa fa-ô custom"> </i>
<i class = "fa fa-university custom"> </i>
<i class = "fa fa-unlock custom"> </i>
<i class = "fa fa-unlock-alt custom"> </i>
<i class = "fa fa-unsorted custom"> </i>
<i class = "fa fa-upload custom"> </i>
<i class = "fa fa-user custom"> </i>
<i class = "fa fa-user-plus custom"> </i>
<i class = "fa fa-user-secret custom"> </i>
<i class = "fa fa-user-times custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Font Awesome Hand. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Hand. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-o-left custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-stop-o custom"> </i>
<i class = "fa fa-thumbs-o-up custom"> </i>
<i class = "fa fa-hand-lizard-o custom"> </i>
<i class = "fa fa-hand-o-right custom"> </i>
<i class = "fa fa-hand-peace-o custom"> </i>
<i class = "fa fa-hand-pull-o custom"> </i>
<i class = "fa fa-thumbs-down custom"> </i>
<i class = "fa fa-thumbs-up custom"> </i>
<i class = "fa fa-hand-o-up custom"> </i>
<i class = "fa fa-hand-pointer-o custom"> </i>
<i class = "fa fa-hand-spock-o custom"> </i>
<i class = "fa fa-thumbs-o-down custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Phông chữ Vận chuyển Tuyệt vời. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Phông chữ Awesome Transportation. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-ô tô custom"> </i>
<i class = "fa fa-bike custom"> </i>
<i class = "fa fa-bus custom"> </i>
<i class = "fa fa-cab custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-Fight-jet custom"> </i>
<i class = "fa fa-moto custom"> </i>
<i class = "fa fa-plane custom"> </i>
<i class = "fa fa-rocket custom"> </i>
<i class = "fa fa-ship custom"> </i>
<i class = "fa fa-space-thoi custom"> </i>
<i class = "fa fa-metro custom"> </i>
<i class = "fa fa-taxi custom"> </i>
<i class = "fa fa-train custom"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Font Awesome Gender. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Gender. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-worldless custom"> </i>
<i class = "fa fa-interex custom"> </i>
<i class = "fa fa-mars custom"> </i>
<i class = "fa fa-mars-double custom"> </i>
<i class = "fa fa-mars-stroke custom"> </i>
<i class = "fa fa-mars-stroke-h custom"> </i>
<i class = "fa fa-mars-stroke-v custom"> </i>
<i class = "fa fa-glass custom"> </i>
<i class = "fa fa-neuter custom"> </i>
<i class = "fa fa-convert custom"> </i>
<i class = "fa fa-convert-alt custom"> </i>
<i class = "fa fa-venus custom"> </i>
<i class = "fa fa-venus-double custom"> </i>
<i class = "fa fa-venus-mars custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Kiểu Tệp Tuyệt vời. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Loại tệp phông chữ tuyệt vời. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-file custom"> </i>
<i class = "fa fa-file-archive-o custom"> </i>
<i class = "fa fa-file-audio-o custom"> </i>
<i class = "fa fa-file-code-o custom"> </i>
<i class = "fa fa-file-excel-o custom"> </i>
<i class = "fa fa-file-image-o custom"> </i>
<i class = "fa fa-file-movie-o custom"> </i>
<i class = "fa fa-file-o custom"> </i>
<i class = "fa fa-file-pdf-o custom"> </i>
<i class = "fa fa-file-photo-o custom"> </i>
<i class = "fa fa-file-picture-o custom"> </i>
<i class = "fa fa-file-powerpoint-o custom"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-zip-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Font Awesome Spinner. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Spinner. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-circle-o-notch custom"> </i>
<i class = "fa fa-cog custom"> </i>
<i class = "fa fa-gear custom"> </i>
<i class = "fa fa-refresh custom"> </i>
<i class = "fa fa-spinner custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Điều khiển biểu mẫu bằng phông chữ Awesome. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Form Control. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle custom"> </i>
<i class = "fa fa-circle-o custom"> </i>
<i class = "fa fa-dot-circle-o custom"> </i>
<i class = "fa fa-trừ-vuông tùy chỉnh"> </i>
<i class = "fa fa-trừ-square-o custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o custom"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Thanh toán tuyệt vời của Phông chữ. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Payment. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-cc-amex custom"> </i>
<i class = "fa fa-cc -ators-club custom"> </i>
<i class = "fa fa-cc-khám phá tùy chỉnh"> </i>
<i class = "fa fa-cc-jcb custom"> </i>
<i class = "fa fa-cc-mastercard custom"> </i>
<i class = "fa fa-cc-paypal custom"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa fa-credit-card custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Biểu đồ phông chữ tuyệt vời. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy việc sử dụng và kết quả của các biểu tượng Biểu đồ phông chữ tuyệt vời. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o custom"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-pie-chart custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Tiền tệ tuyệt vời trong Font. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Currency Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-bitcoin custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-cny custom"> </i>
<i class = "fa fa-dollar custom"> </i>
<i class = "fa fa-eur custom"> </i>
<i class = "fa fa-euro custom"> </i>
<i class = "fa fa-gbp custom"> </i>
<i class = "fa fa-gg custom"> </i>
<i class = "fa fa-gg-circle custom"> </i>
<i class = "fa fa-ils custom"> </i>
<i class = "fa fa-inr custom"> </i>
<i class = "fa fa-jpy custom"> </i>
<i class = "fa fa-krw custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-rmb custom"> </i>
<i class = "fa fa-ruble custom"> </i>
<i class = "fa fa-rub custom"> </i>
<i class = "fa fa-ruble custom"> </i>
<i class = "fa fa-rupee custom"> </i>
<i class = "fa fa-shekel custom"> </i>
<i class = "fa fa-sheqel custom"> </i>
<i class = "fa fa-try custom"> </i>
<i class = "fa fa-turkish-lira custom"> </i>
<i class = "fa fa-usd custom"> </i>
<i class = "fa fa-won custom"> </i>
<i class = "fa fa-yen custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Trình chỉnh sửa văn bản tuyệt vời của Phông chữ. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Text Editor. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-align-center custom"> </i>
<i class = "fa fa-align-justify custom"> </i>
<i class = "fa fa-align-left custom"> </i>
<i class = "fa fa-align-right custom"> </i>
<i class = "fa fa-bold custom"> </i>
<i class = "fa fa-chain custom"> </i>
<i class = "fa fa-chain-break custom"> </i>
<i class = "fa fa-clipboard custom"> </i>
<i class = "fa fa-column custom"> </i>
<i class = "fa fa-copy custom"> </i>
<i class = "fa fa-cut custom"> </i>
<i class = "fa fa-decent custom"> </i>
<i class = "fa fa-eraser custom"> </i>
<i class = "fa fa-file custom"> </i>
<i class = "fa fa-file-o custom"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o custom"> </i>
<i class = "fa fa-files-o custom"> </i>
<i class = "fa fa-floppy-o custom"> </i>
<i class = "fa fa-font custom"> </i>
<i class = "fa fa-header custom"> </i>
<i class = "fa fa-indent custom"> </i>
<i class = "fa fa-italic custom"> </i>
<i class = "fa fa-link custom"> </i>
<i class = "fa fa-list custom"> </i>
<i class = "fa fa-list-alt custom"> </i>
<i class = "fa fa-list-ol custom"> </i>
<i class = "fa fa-list-ul custom"> </i>
<i class = "fa fa-precision custom"> </i>
<i class = "fa fa-paperclip custom"> </i>
<i class = "fa fa-paragraph custom"> </i>
<i class = "fa fa-paste custom"> </i>
<i class = "fa fa-repeat custom"> </i>
<i class = "fa fa-rot-left custom"> </i>
<i class = "fa fa-rot-right custom"> </i>
<i class = "fa fa-save custom"> </i>
<i class = "fa fa-pull custom"> </i>
<i class = "fa fa-strikethrough custom"> </i>
<i class = "fa fa-subscript custom"> </i>
<i class = "fa fa-table custom"> </i>
<i class = "fa fa-text-heigh custom"> </i>
<i class = "fa fa-text-width custom"> </i>
<i class = "fa fa-th custom"> </i>
<i class = "fa fa-th-large custom"> </i>
<i class = "fa fa-th-list custom"> </i>
<i class = "fa fa-underline custom"> </i>
<i class = "fa fa-undo custom"> </i>
<i class = "fa fa-unlink custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Hướng Phông chữ Tuyệt vời. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Định hướng Phông chữ. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "fa fa-angle-double-down custom"> </i>
<i class = "fa fa-angle-double-left custom"> </i>
<i class = "fa fa-angle-double-right custom"> </i>
<i class = "fa fa-angle-double-up custom"> </i>
<i class = "fa fa-angle-down custom"> </i>
<i class = "fa fa-angle-left custom"> </i>
<i class = "fa fa-angle-right custom"> </i>
<i class = "fa fa-angle-up custom"> </i>
<i class = "fa fa-arrow-circle-down custom"> </i>
<i class = "fa fa-arrow-circle-left custom"> </i>
<i class = "fa fa-arrow-circle-right custom"> </i>
<i class = "fa fa-arrow-circle-up custom"> </i>
<i class = "fa fa-arrow-circle-o-down custom"> </i>
<i class = "fa fa-arrow-circle-o-left custom"> </i>
<i class = "fa fa-arrow-circle-o-right custom"> </i>
<i class = "fa fa-arrow-circle-o-up custom"> </i>
<i class = "fa fa-arrow-down custom"> </i>
<i class = "fa fa-arrow-left custom"> </i>
<i class = "fa fa-arrow-right custom"> </i>
<i class = "fa fa-arrow-up custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-alt custom"> </i>
<i class = "fa fa-arrows-h custom"> </i>
<i class = "fa fa-arrows-v custom"> </i>
<i class = "fa fa-caret-down custom"> </i>
<i class = "fa fa-caret-left custom"> </i>
<i class = "fa fa-caret-right custom"> </i>
<i class = "fa fa-caret-up custom"> </i>
<i class = "fa fa-caret-square-o-down custom"> </i>
<i class = "fa fa-caret-square-o-left custom"> </i>
<i class = "fa fa-caret-square-o-right custom"> </i>
<i class = "fa fa-caret-square-o-up custom"> </i>
<i class = "fa fa-chevron-circle-down custom"> </i>
<i class = "fa fa-chevron-circle-left custom"> </i>
<i class = "fa fa-chevron-circle-right custom"> </i>
<i class = "fa fa-chevron-circle-up custom"> </i>
<i class = "fa fa-chevron-down custom"> </i>
<i class = "fa fa-chevron-left custom"> </i>
<i class = "fa fa-chevron-right custom"> </i>
<i class = "fa fa-chevron-up custom"> </i>
<i class = "fa fa-hand-o-down custom"> </i>
<i class = "fa fa-hand-o-left custom"> </i>
<i class = "fa fa-hand-o-right custom"> </i>
<i class = "fa fa-hand-o-up custom"> </i>
<i class = "fa fa-long-arrow-down custom"> </i>
<i class = "fa fa-long-arrow-left custom"> </i>
<i class = "fa fa-long-arrow-right custom"> </i>
<i class = "fa fa-long-arrow-up custom"> </i>
<i class = "fa fa-toggle-down custom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-exchange custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Trình phát video tuyệt vời trong Font. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Trình phát Video bằng Font Awesome. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Biểu tượng
<i class = "fa fa-arrows-alt custom"> </i>
<i class = "fa fa-back custom"> </i>
<i class = "fa fa-nén tùy chỉnh"> </i>
<i class = "fa fa-eject custom"> </i>
<i class = "fa fa-expand custom"> </i>
<i class = "fa fa-fast -back custom"> </i>
<i class = "fa fa-fast-forward custom"> </i>
<i class = "fa fa-forward custom"> </i>
<i class = "fa fa-play-circle custom"> </i>
<i class = "fa fa-play-circle-o custom"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-step-back custom"> </i>
<i class = "fa fa-stop custom"> </i>
<i class = "fa fa-pause custom"> </i>
<i class = "fa fa-play custom"> </i>
<i class = "fa fa-youtube-play custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Font Awesome Brand. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<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: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Brand. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Biểu tượng
<i class = "fa fa-500px custom"> </i>
<i class = "fa fa-amazon custom"> </i>
<i class = "fa fa-android custom"> </i>
<i class = "fa fa-angellist custom"> </i>
<i class = "fa fa-adn custom"> </i>
<i class = "fa fa-apple custom"> </i>
<i class = "fa fa-behaviornce custom"> </i>
<i class = "fa fa-surnce-square custom"> </i>
<i class = "fa fa-bitbucket custom"> </i>
<i class = "fa fa-bitbucket-square custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-black-tie custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-buyellads custom"> </i>
<i class = "fa fa-cc-amex custom"> </i>
<i class = "fa fa-cc -ators-club custom"> </i>
<i class = "fa fa-cc-khám phá tùy chỉnh"> </i>
<i class = "fa fa-cc-jcb custom"> </i>
<i class = "fa fa-cc-mastercard custom"> </i>
<i class = "fa fa-cc-paypal custom"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa fa-chrome custom"> </i>
<i class = "fa fa-codepen custom"> </i>
<i class = "fa fa-connectdevelop custom"> </i>
<i class = "fa fa-contao custom"> </i>
<i class = "fa fa-css3 custom"> </i>
<i class = "fa fa-dashcube custom"> </i>
<i class = "fa fa-ngon custom"> </i>
<i class = "fa fa-tàantart custom"> </i>
<i class = "fa fa-digg custom"> </i>
<i class = "fa fa-dribbble custom"> </i>
<i class = "fa fa-dropbox custom"> </i>
<i class = "fa fa-drupal custom"> </i>
<i class = "fa fa-Empire custom"> </i>
<i class = "fa fa-expeditedssl custom"> </i>
<i class = "fa fa-facebook custom"> </i>
<i class = "fa fa-facebook-f custom"> </i>
<i class = "fa fa-facebook-official custom"> </i>
<i class = "fa fa-facebook-square custom"> </i>
<i class = "fa fa-firefox custom"> </i>
<i class = "fa fa-flickr custom"> </i>
<i class = "fa fa-fonticons custom"> </i>
<i class = "fa fa-forumbee custom"> </i>
<i class = "fa fa-foursquare custom"> </i>
<i class = "fa fa-ge custom"> </i>
<i class = "fa fa-get-pocket custom"> </i>
<i class = "fa fa-gg custom"> </i>
<i class = "fa fa-gg-circle custom"> </i>
<i class = "fa fa-git custom"> </i>
<i class = "fa fa-git-square custom"> </i>
<i class = "fa fa-github custom"> </i>
<i class = "fa fa-github-alt custom"> </i>
<i class = "fa fa-github-square custom"> </i>
<i class = "fa fa-gratipay custom"> </i>
<i class = "fa fa-google custom"> </i>
<i class = "fa fa-google-plus custom"> </i>
<i class = "fa fa-google-plus-square custom"> </i>
<i class = "fa fa-youtube-play custom"> </i>
<i class = "fa fa-gratipay custom"> </i>
<i class = "fa fa-hacker-news custom"> </i>
<i class = "fa fa-houzz custom"> </i>
<i class = "fa fa-html5 custom"> </i>
<i class = "fa fa-instagram custom"> </i>
<i class = "fa fa-internet-explorer custom"> </i>
<i class = "fa fa-ioxhost custom"> </i>
<i class = "fa fa-joomla custom"> </i>
<i class = "fa fa-jsfiddle custom"> </i>
<i class = "fa fa-lastfm custom"> </i>
<i class = "fa fa-lastfm-square custom"> </i>
<i class = "fa fa-leanpub custom"> </i>
<i class = "fa fa-linkedin custom"> </i>
<i class = "fa fa-linkedin-square custom"> </i>
<i class = "fa fa-linux custom"> </i>
<i class = "fa fa-maxcdn custom"> </i>
<i class = "fa fa-meanpath custom"> </i>
<i class = "fa fa-medium custom"> </i>
<i class = "fa fa-odnoklassniki custom"> </i>
<i class = "fa fa-odnoklassniki-square custom"> </i>
<i class = "fa fa-opencart custom"> </i>
<i class = "fa fa-opera custom"> </i>
<i class = "fa fa-optin-monster custom"> </i>
<i class = "fa fa-openid custom"> </i>
<i class = "fa fa-pagelines custom"> </i>
<i class = "fa fa-youtube custom"> </i>
<i class = "fa fa-pied-piper custom"> </i>
<i class = "fa fa-pied-piper-alt custom"> </i>
<i class = "fa fa-pinterest custom"> </i>
<i class = "fa fa-pinterest-p custom"> </i>
<i class = "fa fa-pinterest-square custom"> </i>
<i class = "fa fa-qq custom"> </i>
<i class = "fa fa-ra custom"> </i>
<i class = "fa fa-Rebel custom"> </i>
<i class = "fa fa-reddit custom"> </i>
<i class = "fa fa-renren custom"> </i>
<i class = "fa fa-amazon custom"> </i>
<i class = "fa fa-safari custom"> </i>
<i class = "fa fa-selly custom"> </i>
<i class = "fa fa-youtube-square custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square custom"> </i>
<i class = "fa fa-shirtinbulk custom"> </i>
<i class = "fa fa-simplebuilt custom"> </i>
<i class = "fa fa-skyatlas custom"> </i>
<i class = "fa fa-skype custom"> </i>
<i class = "fa fa-slack custom"> </i>
<i class = "fa fa-yc-square custom"> </i>
<i class = "fa fa-soundcloud custom"> </i>
<i class = "fa fa-spotify custom"> </i>
<i class = "fa fa-stack-exchange custom"> </i>
<i class = "fa fa-stack-Over custom"> </i>
<i class = "fa fa-steam custom"> </i>
<i class = "fa fa-steam-square custom"> </i>
<i class = "fa fa-stumbleupon custom"> </i>
<i class = "fa fa-stumbleupon-circle custom"> </i>
<i class = "fa fa-tencent-weibo custom"> </i>
<i class = "fa fa-trello custom"> </i>
<i class = "fa fa-tripadvisor custom"> </i>
<i class = "fa fa-tumblr custom"> </i>
<i class = "fa fa-tumblr-square custom"> </i>
<i class = "fa fa-yahoo custom"> </i>
<i class = "fa fa-twitter custom"> </i>
<i class = "fa fa-twitter-square custom"> </i>
<i class = "fa fa-viacoin custom"> </i>
<i class = "fa fa-vimeo custom"> </i>
<i class = "fa fa-vimeo-square custom"> </i>
<i class = "fa fa-Grape custom"> </i>
<i class = "fa fa-vk custom"> </i>
<i class = "fa fa-wechat custom"> </i>
<i class = "fa fa-weibo custom"> </i>
<i class = "fa fa-weixin custom"> </i>
<i class = "fa fa-whatsapp custom"> </i>
<i class = "fa fa-wikipedia-w custom"> </i>
<i class = "fa fa-windows custom"> </i>
<i class = "fa fa-wordpress custom"> </i>
<i class = "fa fa-xing custom"> </i>
<i class = "fa fa-xing-square custom"> </i>
<i class = "fa fa-y-combinator custom"> </i>
<i class = "fa fa-y-combinator-square custom"> </i>
<i class = "fa fa-yc custom"> </i>

Chương này giải thích cách sử dụng các biểu tượng Font Awesome Medical. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Bảng sau đây cho thấy cách sử dụng và kết quả của các biểu tượng Font Awesome Medical. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Biểu tượng
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-h-square custom"> </i>
<i class = "fa fa-heart custom"> </i>
<i class = "fa fa-heart-o custom"> </i>
<i class = "fa fa-heartbeat custom"> </i>
<i class = "fa fa-Hospital-o custom"> </i>
<i class = "fa fa-medkit custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-stethoscope custom"> </i>
<i class = "fa fa-user-md custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Google cung cấp một bộ gồm 750 biểu tượng được thiết kế theo "nguyên tắc thiết kế material design" và chúng được gọi là Material Designcác biểu tượng. Các biểu tượng này đơn giản và chúng hỗ trợ tất cả các trình duyệt web hiện đại. Vì các biểu tượng này dựa trên vector nên chúng cũng có thể mở rộng. Để sử dụng các biểu tượng này, chúng ta phải tải phông chữ (thư viện)material-icons.

Đang tải Phông chữ (thư viện)

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

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

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

Biểu tượng Vật liệu của Google cung cấp một danh sách dài các biểu tượng. Chọn bất kỳ 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ó tênaccessibility thuộc thể loại hành động.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</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ó trong CSS và sử dụng nó cùng với tên lớp như hình dưới đây. Trong ví dụ sau, chúng tôi đã khai báo kích thước là 6 em.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

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

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

Bạn có thể sử dụng CSS để xác định màu của biểu tượng. Ví dụ sau đây cho thấy cách bạn có thể thay đổi màu của một biểu tượng được gọi làaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

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

Danh sách các loại

Phông chữ Material Icons của Google cung cấp 519 biểu tượng trong các danh mục sau:

Biểu tượng hành động
Biểu tượng cảnh báo
Biểu tượng AV
Biểu tượng giao tiếp
Biểu tượng nội dung
Biểu tượng thiết bị
Biểu tượng biên tập viên
Biểu tượng tệp
Biểu tượng phần cứng
Biểu tượng hình ảnh
Biểu tượng bản đồ
Biểu tượng điều hướng
Biểu tượng thông báo
Biểu tượng xã hội
Chuyển đổi các biểu tượng

Để sử dụng bất kỳ biểu tượng nào trong số 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 Đơn vị này (Biểu tượng Vật liệu), 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 Vật liệu khác nhau.

Chương này giải thích cách sử dụng Biểu tượng Hành động (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của Biểu tượng Hành động (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> 3d_rotation </i>	3d_rotation
<i class = "material-icon custom"> khả năng tiếp cận </i>	khả năng tiếp cận
<i class = "material-icon custom"> account_balance </i>	số dư tài khoản
<i class = "material-icon custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icon custom"> account_box </i>	account_box
<i class = "material-icon custom"> account_circle </i>	account_circle
<i class = "material-icon custom"> add_shopping_cart </i>	add_shopping_cart
<i class = "material-icon custom"> báo thức </i>	báo thức
<i class = "material-icon custom"> alert_add </i>	alert_add
<i class = "material-icon custom"> alert_off </i>	alert_off
<i class = "material-icon custom"> alert_on </i>	alert_on
<i class = "material-icon custom"> android </i>	android
<i class = "material-icon custom"> thông báo </i>	sự thông báo
<i class = "material-icon custom"> khía cạnh_ratio </i>	khía cạnh_ratio
<i class = "material-icon custom"> đánh giá </i>	thẩm định, lượng định, đánh giá
<i class = "material-icon custom"> chuyển nhượng </i>	sự phân công
<i class = "material-icon custom"> delivery_ind </i>	chỉ định
<i class = "material-icon custom"> task_late </i>	phân_lục
<i class = "material-icon custom"> delivery_return </i>	task_return
<i class = "material-icon custom"> delivery_returned </i>	phân_trả
<i class = "material-icon custom"> delivery_turned_in </i>	task_turned_in
<i class = "material-icon custom"> autorenew </i>	autorenew
<i class = "material-icon custom"> sao lưu </i>	sao lưu
<i class = "material-icon custom"> sách </i>	sách
<i class = "material-icon custom"> dấu trang </i>	dấu trang
<i class = "material-icon custom"> bookmark_border </i>	bookmark_border
<i class = "material-icon custom"> bug_report </i>	báo cáo lỗi
<i class = "material-icon custom"> build </i>	xây dựng
<i class = "material-icon custom"> được lưu vào bộ nhớ đệm </i>	lưu vào bộ nhớ đệm
<i class = "material-icon custom"> camera_enhance </i>	camera_enhance
<i class = "material-icon custom"> card_giftcard </i>	card_giftcard
<i class = "material-icon custom"> card_membership </i>	card_membership
<i class = "material-icon custom"> card_travel </i>	card_travel
<i class = "material-icon custom"> change_history </i>	thay đổi lịch sử
<i class = "material-icon custom"> check_circle </i>	check_circle
<i class = "material-icon custom"> chrome_reader_mode </i>	chrome_reader_mode
<i class = "material-icon custom"> class </i>	lớp học
<i class = "material-icon custom"> mã </i>	mã
<i class = "material-icon custom"> credit_card </i>	thẻ tín dụng
<i class = "material-icon custom"> bảng điều khiển </i>	bảng điều khiển
<i class = "material-icon custom"> xóa </i>	xóa bỏ
<i class = "material-icon custom"> description </i>	sự miêu tả
<i class = "material-icon custom"> dns </i>	dns
<i class = "material-icon custom"> xong </i>	làm xong
<i class = "material-icon custom"> done_all </i>	đã hoàn thành tất cả
<i class = "material-icon custom"> eject </i>	đẩy ra
<i class = "material-icon custom"> sự kiện </i>	biến cố
<i class = "material-icon custom"> event_seat </i>	event_seat
<i class = "material-icon custom"> exit_to_app </i>	exit_to_app
<i class = "material-icon custom"> khám phá </i>	khám phá
<i class = "material-icon custom"> extension </i>	sự mở rộng
<i class = "material-icon custom"> face </i>	khuôn mặt
<i class = "material-icon custom"> yêu thích </i>	yêu thích
<i class = "material-icon custom"> favourite_border </i>	yêu thích_border
<i class = "material-icon custom"> phản hồi </i>	Phản hồi
<i class = "material-icon custom"> find_in_page </i>	Tìm ở trang
<i class = "material-icon custom"> find_replace </i>	Tìm thay thế
<i class = "material-icon custom"> flight_land </i>	Flight_land
<i class = "material-icon custom"> flight_takeoff </i>	Flight_takeoff
<i class = "material-icon custom"> flip_to_back </i>	flip_to_back
<i class = "material-icon custom"> flip_to_front </i>	flip_to_front
<i class = "material-icon custom"> get_app </i>	get_app
<i class = "material-icon custom"> gif </i>	gif
<i class = "material-icon custom"> grade </i>	cấp
<i class = "material-icon custom"> group_work </i>	group_work
<i class = "material-icon custom"> trợ giúp </i>	Cứu giúp
<i class = "material-icon custom"> help_outline </i>	help_outline
<i class = "material-icon custom"> highlight_off </i>	highlight_off
<i class = "material-icon custom"> history </i>	lịch sử
<i class = "material-icon custom"> home </i>	Trang Chủ
<i class = "material-icon custom"> hourglass_empty </i>	đồng hồ cát_empty
<i class = "material-icon custom"> hourglass_full </i>	đồng hồ cát_full
<i class = "material-icon custom"> http </i>	http
<i class = "material-icon custom"> https </i>	https
<i class = "material-icon custom"> thông tin </i>	thông tin
<i class = "material-icon custom"> info_outline </i>	info_outline
<i class = "material-icon custom"> input </i>	đầu vào
<i class = "material-icon custom"> invert_colors </i>	invert_colors
<i class = "material-icon custom"> nhãn </i>	nhãn
<i class = "material-icon custom"> label_outline </i>	label_outline
<i class = "material-icon custom"> ngôn ngữ </i>	ngôn ngữ
<i class = "material-icon custom"> khởi chạy </i>	phóng
<i class = "material-icon custom"> danh sách </i>	danh sách
<i class = "material-icon custom"> lock </i>	Khóa
<i class = "material-icon custom"> lock_open </i>	lock_open
<i class = "material-icon custom"> lock_outline </i>	lock_outline
<i class = "material-icon custom"> lòng trung thành </i>	lòng trung thành
<i class = "material-icon custom"> markunread_mailbox </i>	markunread_mailbox
<i class = "material-icon custom"> note_add </i>	note_add
<i class = "material-icon custom"> offline_pin </i>	offline_pin
<i class = "material-icon custom"> open_in_browser </i>	mở trong trình duyệt
<i class = "material-icon custom"> open_in_new </i>	open_in_new
<i class = "material-icon custom"> open_with </i>	mở với
<i class = "material-icon custom"> lượt xem trang </i>	lượt xem trang
<i class = "material-icon custom"> thanh toán </i>	thanh toán
<i class = "material-icon custom"> perm_camera_mic </i>	perm_camera_mic
<i class = "material-icon custom"> perm_contact_cale </i>	perm_contact_cale
<i class = "material-icon custom"> perm_data_settings </i>	perm_data_settings
<i class = "material-icon custom"> perm_device_information </i>	perm_device_information
<i class = "material-icon custom"> perm_identity </i>	perm_identity
<i class = "material-icon custom"> perm_media </i>	perm_media
<i class = "material-icon custom"> perm_phone_msg </i>	perm_phone_msg
<i class = "material-icon custom"> perm_scan_wifi </i>	perm_scan_wifi
<i class = "material-icon custom"> picture_in_picture </i>	hình ảnh trong ảnh
<i class = "material-icon custom"> play_for_work </i>	play_for_work
<i class = "material-icon custom"> polyme </i>	polyme
<i class = "material-icon custom"> power_settings_new </i>	power_settings_new
<i class = "material-icon custom"> print </i>	in
<i class = "material-icon custom"> query_builder </i>	query_builder
<i class = "material-icon custom"> question_answer </i>	trả lời câu hỏi
<i class = "material-icon custom"> biên lai </i>	biên lai
<i class = "material-icon custom"> mua lại </i>	chuộc lại
<i class = "material-icon custom"> sắp xếp lại </i>	sắp xếp lại
<i class = "material-icon custom"> report_problem </i>	report_problem
<i class = "material-icon custom"> khôi phục </i>	khôi phục
<i class = "material-icon custom"> room </i>	phòng
<i class = "material-icon custom"> lịch trình </i>	lịch trình
<i class = "material-icon custom"> tìm kiếm </i>	Tìm kiếm
<i class = "material-icon custom"> cài đặt </i>	cài đặt
<i class = "material-icon custom"> settings_application </i>	settings_application
<i class = "material-icon custom"> settings_bl Bluetooth </i>	settings_bl Bluetooth
<i class = "material-icon custom"> settings_brightness </i>	settings_brightness
<i class = "material-icon custom"> settings_cell </i>	settings_cell
<i class = "material-icon custom"> settings_ethernet </i>	settings_ethernet
<i class = "material-icon custom"> settings_input_antenna </i>	settings_input_antenna
<i class = "material-icon custom"> settings_input_component </i>	settings_input_component
<i class = "material-icon custom"> settings_input_hdmi </i>	settings_input_hdmi
<i class = "material-icon custom"> settings_input_svideo </i>	settings_input_svideo
<i class = "material-icon custom"> settings_overscan </i>	settings_overscan
<i class = "material-icon custom"> settings_phone </i>	settings_phone
<i class = "material-icon custom"> settings_power </i>	settings_power
<i class = "material-icon custom"> settings_remote </i>	settings_remote
<i class = "material-icon custom"> settings_voice </i>	settings_voice
<i class = "material-icon custom"> shop </i>	cửa tiệm
<i class = "material-icon custom"> shop_two </i>	shop_two
<i class = "material-icon custom"> shopping_basket </i>	giỏ mua sắm
<i class = "material-icon custom"> shopping_cart </i>	shopping_cart
<i class = "material-icon custom"> speaker_notes </i>	Speaker_notes
<i class = "material-icon custom"> kiểm tra chính tả </i>	kiểm tra chính tả
<i class = "material-icon custom"> star_rate </i>	star_rate
<i class = "material-icon custom"> sao </i>	sao
<i class = "material-icon custom"> store </i>	cửa hàng
<i class = "material-icon custom"> chủ đề </i>	môn học
<i class = "material-icon custom"> supervisor_account </i>	supervisor_account
<i class = "material-icon custom"> swap_horiz </i>	swap_horiz
<i class = "material-icon custom"> swap_vert </i>	swap_vert
<i class = "material-icon custom"> swap_vertical_circle </i>	swap_vertical_circle
<i class = "material-icon custom"> system_update_alt </i>	system_update_alt
<i class = "material-icon custom"> tab </i>	chuyển hướng
<i class = "material-icon custom"> tab_unselected </i>	tab_unselected
<i class = "material-icon custom"> rạp hát </i>	rạp hát
<i class = "material-icon custom"> thumb_down </i>	thumb_down
<i class = "material-icon custom"> thumb_up </i>	đưa ngón cái lên
<i class = "material-icon custom"> thumbs_up_down </i>	thumbs_up_down
<i class = "material-icon custom"> toc </i>	toc
<i class = "material-icon custom"> hôm nay </i>	hôm nay
<i class = "material-icon custom"> số điện thoại </i>	thu phí
<i class = "material-icon custom"> track_changes </i>	track_changes
<i class = "material-icon custom"> dịch </i>	Phiên dịch
<i class = "material-icon custom"> trending_down </i>	trending_down
<i class = "material-icon custom"> trending_flat </i>	trending_flat
<i class = "material-icon custom"> trending_up </i>	xu hướng_up
<i class = "material-icon custom"> turn_in </i>	turn_in
<i class = "material-icon custom"> verify_user </i>	người dùng đã xác minh
<i class = "material-icon custom"> view_agenda </i>	view_agenda
<i class = "material-icon custom"> view_array </i>	view_array
<i class = "material-icon custom"> view_carousel </i>	view_carousel
<i class = "material-icon custom"> view_column </i>	view_column
<i class = "material-icon custom"> view_day </i>	view_day
<i class = "material-icon custom"> view_headline </i>	view_headline
<i class = "material-icon custom"> view_list </i>	danh sách xem
<i class = "material-icon custom"> view_module </i>	view_module
<i class = "material-icon custom"> view_quilt </i>	view_quilt
<i class = "material-icon custom"> view_stream </i>	view_stream
<i class = "material-icon custom"> view_week </i>	view_week
<i class = "material-icon custom"> khả năng hiển thị </i>	hiển thị
<i class = "material-icon custom"> display_off </i>	khả năng hiển thị
<i class = "material-icon custom"> work </i>	công việc
<i class = "material-icon custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icon custom"> zoom_in </i>	phóng to
<i class = "material-icon custom"> zoom_out </i>	thu nhỏ

Chương này giải thích việc sử dụng các biểu tượng Cảnh báo (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Cảnh báo (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> add_alert </i>	add_alert
<i class = "material-icon custom"> error </i>	lỗi
<i class = "material-icon custom"> error_outline </i>	error_outline
<i class = "material-icon custom"> warning </i>	cảnh báo

Chương này giải thích cách sử dụng các biểu tượng AV (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng AV (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> phát sóng </i>	phát sóng
<i class = "material-icon custom"> anbom </i>	album
<i class = "material-icon custom"> av_timer </i>	av_timer
<i class = "material-icon custom"> closed_caption </i>	closed_caption
<i class = "material-icon custom"> bộ cân bằng </i>	bộ cân bằng
<i class = "material-icon custom"> rõ ràng </i>	rõ ràng
<i class = "material-icon custom"> fast_osystem </i>	nhanh về phía trước
<i class = "material-icon custom"> fast_rewind </i>	fast_rewind
<i class = "material-icon custom"> forward_10 </i>	forward_10
<i class = "material-icon custom"> forward_30 </i>	forward_30
<i class = "material-icon custom"> forward_5 </i>	forward_5
<i class = "material-icon custom"> trò chơi </i>	Trò chơi
<i class = "material-icon custom"> hd </i>	hd
<i class = "material-icon custom"> thính </i>	thính giác
<i class = "material-icon custom"> high_quality </i>	chất lượng cao
<i class = "material-icon custom"> library_add </i>	library_add
<i class = "material-icon custom"> library_books </i>	sách thư viện
<i class = "material-icon custom"> library_music </i>	library_music
<i class = "material-icon custom"> loop </i>	vòng
<i class = "material-icon custom"> mic </i>	mic
<i class = "material-icon custom"> mic_none </i>	mic_none
<i class = "material-icon custom"> mic_off </i>	mic_off
<i class = "material-icon custom"> phim </i>	bộ phim
<i class = "material-icon custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icon custom"> new_releases </i>	new_releases
<i class = "material-icon custom"> not_interested </i>	not_interested
<i class = "material-icon custom"> tạm dừng </i>	tạm ngừng
<i class = "material-icon custom"> pause_circle_filled </i>	pause_circle_filled
<i class = "material-icon custom"> play_arrow </i>	play_arrow
<i class = "material-icon custom"> play_circle_filled </i>	play_circle_filled
<i class = "material-icon custom"> play_circle_outline </i>	play_circle_outline
<i class = "material-icon custom"> playlist_add </i>	playlist_add
<i class = "material-icon custom"> queue </i>	xếp hàng
<i class = "material-icon custom"> queue_music </i>	queue_music
<i class = "material-icon custom"> radio </i>	Đài
<i class = "material-icon custom"> near_actors </i>	near_actors
<i class = "material-icon custom"> lặp lại </i>	nói lại
<i class = "material-icon custom"> repeat_one </i>	Lặp lại một
<i class = "material-icon custom"> phát lại </i>	phát lại
<i class = "material-icon custom"> phát sóng </i>	replay_10
<i class = "material-icon custom"> replay_30 </i>	replay_30
<i class = "material-icon custom"> replay_5 </i>	replay_5
<i class = "material-icon custom"> xáo trộn </i>	xáo trộn
<i class = "material-icon custom"> ignore_next </i>	bỏ qua
<i class = "material-icon custom"> ignore_previous </i>	bỏ qua
<i class = "material-icon custom"> báo lại </i>	giấc ngũ ngắn
<i class = "material-icon custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icon custom"> dừng lại </i>	dừng lại
<i class = "material-icon custom"> phụ đề </i>	phụ đề
<i class = "material-icon custom"> surround_sound </i>	surround_sound
<i class = "material-icon custom"> video_library </i>	Thư viện băng hình
<i class = "material-icon custom"> videocam </i>	videocam
<i class = "material-icon custom"> videocam_off </i>	videocam_off
<i class = "material-icon custom"> volume_down </i>	giảm âm lượng
<i class = "material-icon custom"> volume_mute </i>	volume_mute
<i class = "material-icon custom"> volume_off </i>	volume_off
<i class = "material-icon custom"> volume_up </i>	tăng âm lượng
<i class = "material-icon custom"> web </i>	web

Chương này giải thích cách sử dụng các biểu tượng Giao tiếp (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Giao tiếp (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> kinh doanh </i>	kinh doanh
<i class = "material-icon custom"> call </i>	gọi
<i class = "material-icon custom"> call_made </i>	call_made
<i class = "material-icon custom"> call_merge </i>	call_merge
<i class = "material-icon custom"> call_missed </i>	call_missed
<i class = "material-icon custom"> call_receive </i>	call_reiled
<i class = "material-icon custom"> call_split </i>	call_split
<i class = "material-icon custom"> trò chuyện </i>	trò chuyện
<i class = "material-icon custom"> chat_bubble </i>	chat_bubble
<i class = "material-icon custom"> chat_bubble_outline </i>	chat_bubble_outline
<i class = "material-icon custom"> clear_all </i>	Làm sạch tất cả
<i class = "material-icon custom"> nhận xét </i>	bình luận
<i class = "material-icon custom"> contact_phone </i>	Điện thoại liên hệ
<i class = "material-icon custom"> danh bạ </i>	liên lạc
<i class = "material-icon custom"> dialer_sip </i>	dialer_sip
<i class = "material-icon custom"> bàn phím số </i>	bàn phím quay số
<i class = "material-icon custom"> forum </i>	diễn đàn
<i class = "material-icon custom"> import_export </i>	nhập khẩu xuất khẩu
<i class = "material-icon custom"> invert_colors_off </i>	invert_colors_off
<i class = "material-icon custom"> live_help </i>	trợ giúp trực tuyến
<i class = "material-icon custom"> location_off </i>	location_off
<i class = "material-icon custom"> location_on </i>	location_on
<i class = "material-icon custom"> tin nhắn </i>	thông điệp
<i class = "material-icon custom"> no_sim </i>	không có sim
<i class = "material-icon custom"> phone </i>	điện thoại
<i class = "material-icon custom"> phonelink_erase </i>	phonelink_erase
<i class = "material-icon custom"> phonelink_lock </i>	phonelink_lock
<i class = "material-icon custom"> phonelink_ring </i>	phonelink_ring
<i class = "material-icon custom"> phonelink_setup </i>	phonelink_setup
<i class = "material-icon custom"> portable_wifi_off </i>	portable_wifi_off
<i class = "material-icon custom"> present_to_all </i>	present_to_all
<i class = "material-icon custom"> ring_volume </i>	ring_volume
<i class = "material-icon custom"> speaker_phone </i>	loa_ngoài
<i class = "material-icon custom"> stay_current_landscape </i>	stay_current_landscape
<i class = "material-icon custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icon custom"> stay_primary_landscape </i>	stay_primary_landscape
<i class = "material-icon custom"> stay_primary_portrait </i>	stay_primary_portrait
<i class = "material-icon custom"> swap_calls </i>	swap_calls
<i class = "material-icon custom"> textms </i>	văn bản
<i class = "material-icon custom"> thư thoại </i>	thư thoại
<i class = "material-icon custom"> vpn_key </i>	vpn_key
<i class = "material-icon custom"> email </i>	e-mail
<i class = "material-icon custom"> call_end </i>	call_end

Chương này giải thích việc sử dụng các biểu tượng Nội dung (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Nội dung (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> thêm </i>	thêm vào
<i class = "material-icon custom"> add_box </i>	add_box
<i class = "material-icon custom"> add_circle </i>	add_circle
<i class = "material-icon custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icon custom"> lưu trữ </i>	kho lưu trữ
<i class = "material-icon custom"> backspace </i>	xóa lùi
<i class = "material-icon custom"> block </i>	khối
<i class = "material-icon custom"> clear </i>	thông thoáng
<i class = "material-icon custom"> content_copy </i>	content_copy
<i class = "material-icon custom"> content_cut </i>	content_cut
<i class = "material-icon custom"> content_paste </i>	content_paste
<i class = "material-icon custom"> tạo </i>	tạo nên
<i class = "material-icon custom"> bản nháp </i>	bản nháp
<i class = "material-icon custom"> filter_list </i>	filter_list
<i class = "material-icon custom"> flag </i>	cờ
<i class = "material-icon custom"> font_download </i>	font_download
<i class = "material-icon custom"> chuyển tiếp </i>	ở đằng trước
<i class = "material-icon custom"> cử chỉ </i>	cử chỉ
<i class = "material-icon custom"> hộp thư đến </i>	hộp thư đến
<i class = "material-icon custom"> link </i>	liên kết
<i class = "material-icon custom"> mail </i>	thư
<i class = "material-icon custom"> markunread </i>	markunread
<i class = "material-icon custom"> làm lại </i>	làm lại
<i class = "material-icon custom"> xóa </i>	tẩy
<i class = "material-icon custom"> remove_circle </i>	remove_circle
<i class = "material-icon custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icon custom"> trả lời </i>	Đáp lại
<i class = "material-icon custom"> reply_all </i>	trả lời tất cả
<i class = "material-icon custom"> báo cáo </i>	báo cáo
<i class = "material-icon custom"> save </i>	tiết kiệm
<i class = "material-icon custom"> select_all </i>	chọn tất cả
<i class = "material-icon custom"> gửi </i>	gửi
<i class = "material-icon custom"> sắp xếp </i>	sắp xếp
<i class = "material-icon custom"> text_format </i>	định dạng văn bản
<i class = "material-icon custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icon custom"> hoàn tác </i>	Hoàn tác

Chương này cung cấp cho bạn cách sử dụng Biểu tượng thiết bị (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng ta đã xác định kích thước và màu sắc như hình dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của Biểu tượng thiết bị (Vật liệu) của Google.

Sử dụng	Kết quả
<i class = "material-icon custom"> access_alarm </i>	access_alarm
<i class = "material-icon custom"> access_alarms </i>	access_alarms
<i class = "material-icon custom"> access_time </i>	thời gian truy cập
<i class = "material-icon custom"> add_alarm </i>	add_alarm
<i class = "material-icon custom"> airplanemode_active </i>	airplanemode_active
<i class = "material-icon custom"> airplanemode_inactive </i>	airplanemode_inactive
<i class = "material-icon custom"> pin_alert </i>	pin_alert
<i class = "material-icon custom"> pin_charging_full </i>	pin_charging_full
<i class = "material-icon custom"> pin_full </i>	Pin đầy
<i class = "material-icon custom"> pin_std </i>	pin_std
<i class = "material-icon custom"> pin_unknown </i>	pin_unknown
<i class = "material-icon custom"> bluetooth </i>	Bluetooth
<i class = "material-icon custom"> bluetooth_connected </i>	bluetooth_connected
<i class = "material-icon custom"> bluetooth_disabled </i>	bluetooth_disabled
<i class = "material-icon custom"> bluetooth_searching </i>	bluetooth_searching
<i class = "material-icon custom"> Bright_auto </i>	độ sáng_auto
<i class = "material-icon custom"> Bright_high </i>	độ sáng_high
<i class = "material-icon custom"> Bright_low </i>	độ sáng
<i class = "material-icon custom"> Bright_medium </i>	Bright_medium
<i class = "material-icon custom"> data_usage </i>	data_usage
<i class = "material-icon custom"> developer_mode </i>	Chế độ nhà phát triển
<i class = "material-icon custom"> thiết bị </i>	thiết bị
<i class = "material-icon custom"> dvr </i>	dvr
<i class = "material-icon custom"> gps_fixed </i>	gps_fixed
<i class = "material-icon custom"> gps_not_fixed </i>	gps_not_fixed
<i class = "material-icon custom"> gps_off </i>	gps_off
<i class = "material-icon custom"> graphic_eq </i>	graphic_eq
<i class = "material-icon custom"> location_disabled </i>	location_disabled
<i class = "material-icon custom"> location_searching </i>	location_searching
<i class = "material-icon custom"> network_cell </i>	network_cell
<i class = "material-icon custom"> network_wifi </i>	network_wifi
<i class = "material-icon custom"> screen_lock_landscape </i>	screen_lock_landscape
<i class = "material-icon custom"> screen_lock_portrait </i>	screen_lock_portrait
<i class = "material-icon custom"> screen_lock_rotation </i>	screen_lock_rotation
<i class = "material-icon custom"> screen_rotation </i>	screen_rotation
<i class = "material-icon custom"> sd_storage </i>	sd_storage
<i class = "material-icon custom"> settings_system_daydream </i>	settings_system_daydream
<i class = "material-icon custom"> signal_cellular_4_bar </i>	signal_cellular_4_bar
<i class = "material-icon custom"> wifi_tethering </i>	wifi_tethering
<i class = "material-icon custom"> signal_cellular_no_sim </i>	signal_cellular_no_sim
<i class = "material-icon custom"> signal_cellular_null </i>	signal_cellular_null
<i class = "material-icon custom"> signal_cellular_off </i>	signal_cellular_off
<i class = "material-icon custom"> signal_wifi_4_bar </i>	signal_wifi_4_bar
<i class = "material-icon custom"> signal_wifi_4_bar_lock </i>	signal_wifi_4_bar_lock
<i class = "material-icon custom"> signal_wifi_off </i>	signal_wifi_off
<i class = "material-icon custom"> lưu trữ </i>	lưu trữ
<i class = "material-icon custom"> usb </i>	USB
<i class = "material-icon custom"> hình nền </i>	hình nền
<i class = "material-icon custom"> widget </i>	vật dụng
<i class = "material-icon custom"> wifi_lock </i>	wifi_lock
<i class = "material-icon custom"> signal_cellular_connected_no_internet_4_bar </i>	signal_cellular_connected_no_internet_4_bar

Chương này giải thích cách sử dụng các biểu tượng Trình chỉnh sửa (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Trình chỉnh sửa (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> attachment_file </i>	tệp đính kèm
<i class = "material-icon custom"> attachment_money </i>	đính kèm_money
<i class = "material-icon custom"> border_all </i>	border_all
<i class = "material-icon custom"> border_bottom </i>	border_bottom
<i class = "material-icon custom"> border_clear </i>	border_clear
<i class = "material-icon custom"> border_color </i>	viền_màu
<i class = "material-icon custom"> border_horizontal </i>	border_horiz Ngang
<i class = "material-icon custom"> border_inner </i>	border_inner
<i class = "material-icon custom"> border_left </i>	border_left
<i class = "material-icon custom"> border_outer </i>	border_outer
<i class = "material-icon custom"> border_right </i>	border_right
<i class = "material-icon custom"> border_style </i>	kiểu viền
<i class = "material-icon custom"> border_top </i>	border_top
<i class = "material-icon custom"> border_vertical </i>	border_vertical
<i class = "material-icon custom"> format_align_center </i>	format_align_center
<i class = "material-icon custom"> format_align_justify </i>	format_align_justify
<i class = "material-icon custom"> format_align_left </i>	format_align_left
<i class = "material-icon custom"> format_align_right </i>	format_align_right
<i class = "material-icon custom"> format_bold </i>	format_bold
<i class = "material-icon custom"> format_clear </i>	format_clear
<i class = "material-icon custom"> format_color_fill </i>	format_color_fill
<i class = "material-icon custom"> format_color_reset </i>	format_color_reset
<i class = "material-icon custom"> format_color_text </i>	format_color_text
<i class = "material-icon custom"> format_indent_decrease </i>	format_indent_decrease
<i class = "material-icon custom"> format_indent_increase </i>	format_indent_increase
<i class = "material-icon custom"> format_italic </i>	format_italic
<i class = "material-icon custom"> format_line_spacing </i>	format_line_spacing
<i class = "material-icon custom"> format_list_bulleted </i>	format_list_bulleted
<i class = "material-icon custom"> format_list_numbered </i>	format_list_numbered
<i class = "material-icon custom"> format_paint </i>	format_paint
<i class = "material-icon custom"> format_quote </i>	format_quote
<i class = "material-icon custom"> format_size </i>	format_size
<i class = "material-icon custom"> format_strikethrough </i>	format_strikethrough
<i class = "material-icon custom"> format_textdirection_l_to_r </i>	format_textdirection_l_to_r
<i class = "material-icon custom"> format_textdirection_r_to_l </i>	format_textdirection_r_to_l
<i class = "material-icon custom"> format_underline </i>	format_underline
<i class = "material-icon custom"> chức năng </i>	chức năng
<i class = "material-icon custom"> insert_chart </i>	insert_chart
<i class = "material-icon custom"> insert_comment </i>	chèn nhận xét
<i class = "material-icon custom"> insert_drive_file </i>	insert_drive_file
<i class = "material-icon custom"> insert_emoticon </i>	insert_emoticon
<i class = "material-icon custom"> insert_invitation </i>	insert_invitation
<i class = "material-icon custom"> insert_link </i>	chèn đường dẫn
<i class = "material-icon custom"> insert_photo </i>	insert_photo
<i class = "material-icon custom"> merge_type </i>	merge_type
<i class = "material-icon custom"> mode_comment </i>	mode_comment
<i class = "material-icon custom"> mode_edit </i>	mode_edit
<i class = "material-icon custom"> money_off </i>	tiền ra
<i class = "material-icon custom"> xuất bản </i>	công bố
<i class = "material-icon custom"> space_bar </i>	dấu cách
<i class = "material-icon custom"> strikethrough_s </i>	Strike_s
<i class = "material-icon custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icon custom"> vertical_align_center </i>	vertical_align_center
<i class = "material-icon custom"> vertical_align_top </i>	vertical_align_top
<i class = "material-icon custom"> wrap_text </i>	bao text

Chương này giải thích cách sử dụng các biểu tượng Tệp (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Tệp (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> tệp đính kèm </i>	tập tin đính kèm
<i class = "material-icon custom"> đám mây </i>	đám mây
<i class = "material-icon custom"> cloud_circle </i>	cloud_circle
<i class = "material-icon custom"> cloud_done </i>	cloud_done
<i class = "material-icon custom"> cloud_download </i>	cloud_download
<i class = "material-icon custom"> cloud_off </i>	cloud_off
<i class = "material-icon custom"> cloud_queue </i>	cloud_queue
<i class = "material-icon custom"> cloud_upload </i>	cloud_upload
<i class = "material-icon custom"> file_download </i>	tập tin tải về
<i class = "material-icon custom"> file_upload </i>	file_upload
<i class = "material-icon custom"> thư mục </i>	thư mục
<i class = "material-icon custom"> folder_open </i>	folder_open
<i class = "material-icon custom"> folder_shared </i>	folder_shared

Chương này giải thích cách sử dụng các biểu tượng Phần cứng (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Phần cứng (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> cast </i>	diễn viên
<i class = "material-icon custom"> cast_connected </i>	cast_connected
<i class = "material-icon custom"> máy tính </i>	máy vi tính
<i class = "material-icon custom"> desktop_mac </i>	desktop_mac
<i class = "material-icon custom"> desktop_windows </i>	desktop_windows
<i class = "material-icon custom"> developer_board </i>	developer_board
<i class = "material-icon custom"> device_hub </i>	device_hub
<i class = "material-icon custom"> dock </i>	bến tàu
<i class = "material-icon custom"> gamepad </i>	gamepad
<i class = "material-icon custom"> tai nghe </i>	tai nghe
<i class = "material-icon custom"> headset_mic </i>	headset_mic
<i class = "material-icon custom"> bàn phím </i>	bàn phím
<i class = "material-icon custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icon custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icon custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icon custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icon custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icon custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icon custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icon custom"> keyboard_return </i>	keyboard_return
<i class = "material-icon custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icon custom"> keyboard_voice </i>	keyboard_voice
<i class = "material-icon custom"> máy tính xách tay </i>	máy tính xách tay
<i class = "material-icon custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icon custom"> laptop_mac </i>	laptop_mac
<i class = "material-icon custom"> laptop_windows </i>	laptop_windows
<i class = "material-icon custom"> memory </i>	ký ức
<i class = "material-icon custom"> chuột </i>	chuột
<i class = "material-icon custom"> phone_android </i>	phone_android
<i class = "material-icon custom"> phone_iphone </i>	phone_iphone
<i class = "material-icon custom"> phonelink </i>	liên kết điện thoại
<i class = "material-icon custom"> phonelink_off </i>	phonelink_off
<i class = "material-icon custom"> power_input </i>	power_input
<i class = "material-icon custom"> bộ định tuyến </i>	bộ định tuyến
<i class = "material-icon custom"> máy quét </i>	máy quét
<i class = "material-icon custom"> bảo mật </i>	Bảo vệ
<i class = "material-icon custom"> sim_card </i>	thẻ SIM
<i class = "material-icon custom"> điện thoại thông minh </i>	điện thoại thông minh
<i class = "material-icon custom"> loa </i>	loa
<i class = "material-icon custom"> speaker_group </i>	Speaker_group
<i class = "material-icon custom"> máy tính bảng </i>	máy tính bảng
<i class = "material-icon custom"> tablet_android </i>	tablet_android
<i class = "material-icon custom"> tablet_mac </i>	tablet_mac
<i class = "material-icon custom"> đồ chơi </i>	đồ chơi
<i class = "material-icon custom"> tv </i>	TV
<i class = "material-icon custom"> watch </i>	đồng hồ đeo tay

Chương này giải thích cách sử dụng các biểu tượng Hình ảnh (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Hình ảnh (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> add_to_photos </i>	add_to_photos
<i class = "material-icon custom"> điều chỉnh </i>	điều chỉnh
<i class = "material-icon custom"> trợ lý </i>	phụ tá
<i class = "material-icon custom"> trợ lý </i>	phụ tá
<i class = "material-icon custom"> audiotrack </i>	Track âm thanh
<i class = "material-icon custom"> dim_circular </i>	mờ_circular
<i class = "material-icon custom"> dim_linear </i>	dim_linear
<i class = "material-icon custom"> dim_off </i>	dim_off
<i class = "material-icon custom"> dim_on </i>	mờ_on
<i class = "material-icon custom"> độ sáng_1 </i>	độ sáng_1
<i class = "material-icon custom"> độ sáng_2 </i>	độ sáng_2
<i class = "material-icon custom"> độ sáng_3 </i>	độ sáng_3
<i class = "material-icon custom"> Bright_4 </i>	độ sáng_4
<i class = "material-icon custom"> Bright_5 </i>	độ sáng_5
<i class = "material-icon custom"> Bright_6 </i>	độ sáng_6
<i class = "material-icon custom"> Bright_7 </i>	độ sáng_7
<i class = "material-icon custom"> break_image </i>	hình ảnh bị hỏng
<i class = "material-icon custom"> brush </i>	chải
<i class = "material-icon custom"> máy ảnh </i>	Máy ảnh
<i class = "material-icon custom"> camera_alt </i>	camera_alt
<i class = "material-icon custom"> camera_front </i>	camera_front
<i class = "material-icon custom"> camera_rear </i>	camera_rear
<i class = "material-icon custom"> camera_roll </i>	camera_roll
<i class = "material-icon custom"> center_focus_strong </i>	center_focus_strong
<i class = "material-icon custom"> center_focus_weak </i>	center_focus_weak
<i class = "material-icon custom"> bộ sưu tập </i>	bộ sưu tập
<i class = "material-icon custom"> collection_bookmark </i>	collection_bookmark
<i class = "material-icon custom"> color_lens </i>	color_lens
<i class = "material-icon custom"> chỉnh màu </i>	tô màu
<i class = "material-icon custom"> so sánh </i>	so sánh
<i class = "material-icon custom"> control_point </i>	control_point
<i class = "material-icon custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icon custom"> cắt </i>	mùa vụ
<i class = "material-icon custom"> crop_16_9 </i>	crop_16_9
<i class = "material-icon custom"> crop_3_2 </i>	crop_3_2
<i class = "material-icon custom"> crop_5_4 </i>	crop_5_4
<i class = "material-icon custom"> crop_7_5 </i>	crop_7_5
<i class = "material-icon custom"> crop_din </i>	crop_din
<i class = "material-icon custom"> crop_free </i>	crop_free
<i class = "material-icon custom"> crop_landscape </i>	crop_landscape
<i class = "material-icon custom"> crop_original </i>	crop_original
<i class = "material-icon custom"> crop_portrait </i>	crop_portrait
<i class = "material-icon custom"> crop_square </i>	crop_square
<i class = "material-icon custom"> dehaze </i>	ngủ gật
<i class = "material-icon custom"> chi tiết </i>	chi tiết
<i class = "material-icon custom"> chỉnh sửa </i>	biên tập
<i class = "material-icon custom"> phơi sáng </i>	sự phơi nhiễm
<i class = "material-icon custom" >osure_neg_1 </i>	contact_neg_1
<i class = "material-icon custom" >osure_plus_1 </i>	osure_plus_1
<i class = "material-icon custom" >osure_plus_2 </i>	phơi sáng_plus_2
<i class = "material-icon custom" >osure_zero </i>	contact_zero
<i class = "material-icon custom"> filter </i>	bộ lọc
<i class = "material-icon custom"> filter_1 </i>	filter_1
<i class = "material-icon custom"> filter_2 </i>	bộ lọc_2
<i class = "material-icon custom"> filter_3 </i>	filter_3
<i class = "material-icon custom"> filter_4 </i>	filter_4
<i class = "material-icon custom"> filter_5 </i>	filter_5
<i class = "material-icon custom"> filter_6 </i>	filter_6
<i class = "material-icon custom"> filter_7 </i>	filter_7
<i class = "material-icon custom"> filter_8 </i>	filter_8
<i class = "material-icon custom"> filter_9 </i>	filter_9
<i class = "material-icon custom"> filter_9_plus </i>	filter_9_plus
<i class = "material-icon custom"> filter_b_and_w </i>	filter_b_and_w
<i class = "material-icon custom"> filter_center_focus </i>	filter_center_focus
<i class = "material-icon custom"> filter_drama </i>	filter_drama
<i class = "material-icon custom"> filter_frames </i>	filter_frames
<i class = "material-icon custom"> filter_hdr </i>	filter_hdr
<i class = "material-icon custom"> filter_none </i>	filter_none
<i class = "material-icon custom"> filter_tilt_shift </i>	filter_tilt_shift
<i class = "material-icon custom"> filter_vi Movie </i>	filter_vi Movie
<i class = "material-icon custom"> bùng phát </i>	bùng phát
<i class = "material-icon custom"> flash_auto </i>	flash_auto
<i class = "material-icon custom"> flash_off </i>	flash_off
<i class = "material-icon custom"> flash_on </i>	flash_on
<i class = "material-icon custom"> lật </i>	lật
<i class = "material-icon custom"> gradient </i>	dốc
<i class = "material-icon custom"> hạt </i>	ngũ cốc
<i class = "material-icon custom"> grid_off </i>	grid_off
<i class = "material-icon custom"> grid_on </i>	lưới điện trên
<i class = "material-icon custom"> hdr_off </i>	hdr_off
<i class = "material-icon custom"> hdr_on </i>	hdr_on
<i class = "material-icon custom"> hdr_strong </i>	hdr_strong
<i class = "material-icon custom"> hdr_weak </i>	hdr_weak
<i class = "material-icon custom"> chữa bệnh </i>	đang lành lại
<i class = "material-icon custom"> image </i>	hình ảnh
<i class = "material-icon custom"> image_aspect_ratio </i>	image_aspect_ratio
<i class = "material-icon custom"> iso </i>	iso
<i class = "material-icon custom"> cảnh quan </i>	phong cảnh
<i class = "material-icon custom"> rò rỉ_add </i>	rò rỉ_add
<i class = "material-icon custom"> leak_remove </i>	rò rỉ_remove
<i class = "material-icon custom"> ống kính </i>	ống kính
<i class = "material-icon custom"> ngoại hình </i>	nhìn
<i class = "material-icon custom"> look_3 </i>	trông_3
<i class = "material-icon custom"> look_4 </i>	vẻ_4
<i class = "material-icon custom"> look_5 </i>	vẻ_5
<i class = "material-icon custom"> look_6 </i>	vẻ_6
<i class = "material-icon custom"> look_one </i>	ngoại hình
<i class = "material-icon custom"> look_two </i>	look_two
<i class = "material-icon custom"> loupe </i>	chó săn
<i class = "material-icon custom"> mono_photos </i>	Mono_photos
<i class = "material-icon custom"> movie_creation </i>	movie_creation
<i class = "material-icon custom"> music_note </i>	music_note
<i class = "material-icon custom"> nature </i>	Thiên nhiên
<i class = "material-icon custom"> nature_people </i>	thiên nhiên
<i class = "material-icon custom"> wb_sunny </i>	wb_sunny
<i class = "material-icon custom"> Navigate_next </i>	Navigate_next
<i class = "material-icon custom"> Navigate_before </i>	Navigate_before
<i class = "material-icon custom"> bảng màu </i>	bảng màu
<i class = "material-icon custom"> ảnh toàn cảnh </i>	toàn cảnh
<i class = "material-icon custom"> panorama_fish_eye </i>	panorama_fish_eye
<i class = "material-icon custom"> panorama_horizontal </i>	panorama_horiz Ngang
<i class = "material-icon custom"> panorama_vertical </i>	panorama_vertical
<i class = "material-icon custom"> panorama_wide_angle </i>	panorama_wide_angle
<i class = "material-icon custom"> ảnh </i>	hình chụp
<i class = "material-icon custom"> photo_album </i>	album ảnh
<i class = "material-icon custom"> photo_camera </i>	photo_camera
<i class = "material-icon custom"> photo_library </i>	thư viện ảnh
<i class = "material-icon custom"> photo_size_select_actual </i>	photo_size_select_actual
<i class = "material-icon custom"> photo_size_select_large </i>	photo_size_select_large
<i class = "material-icon custom"> photo_size_select_small </i>	photo_size_select_small
<i class = "material-icon custom"> picture_as_pdf </i>	picture_as_pdf
<i class = "material-icon custom"> chân dung </i>	Chân dung
<i class = "material-icon custom"> remove_red_eye </i>	remove_red_eye
<i class = "material-icon custom"> xoay_90_degrees_ccw </i>	xoay_90_degrees_ccw
<i class = "material-icon custom"> xoay_left </i>	xoay trái
<i class = "material-icon custom"> xoay_right </i>	xoay phải
<i class = "material-icon custom"> trình chiếu </i>	trình chiếu
<i class = "material-icon custom"> nắn lại </i>	làm thẳng
<i class = "material-icon custom"> style </i>	Phong cách
<i class = "material-icon custom"> switch_camera </i>	switch_camera
<i class = "material-icon custom"> switch_video </i>	switch_video
<i class = "material-icon custom"> tag_faces </i>	tag_faces
<i class = "material-icon custom"> texture </i>	kết cấu
<i class = "material-icon custom"> timelapse </i>	timelapse
<i class = "material-icon custom"> hẹn giờ </i>	hẹn giờ
<i class = "material-icon custom"> timer_10 </i>	timer_10
<i class = "material-icon custom"> timer_3 </i>	timer_3
<i class = "material-icon custom"> timer_off </i>	timer_off
<i class = "material-icon custom"> tonality </i>	âm giai
<i class = "material-icon custom"> biến đổi </i>	biến đổi
<i class = "material-icon custom"> tune </i>	điều chỉnh
<i class = "material-icon custom"> view_comfy </i>	view_comfy
<i class = "material-icon custom"> view_compact </i>	view_compact
<i class = "material-icon custom"> họa tiết </i>	họa tiết
<i class = "material-icon custom"> wb_auto </i>	wb_auto
<i class = "material-icon custom"> wb_cloudy </i>	wb_cloudy
<i class = "material-icon custom"> wb_incandescent </i>	wb_incandescent
<i class = "material-icon custom"> wb_iridescent </i>	wb_iridescent

Chương này giải thích việc sử dụng các biểu tượng Bản đồ (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Bản đồ (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> đã ở đây </i>	ở đây
<i class = "material-icon custom"> chỉ đường </i>	hướng
<i class = "material-icon custom"> direction_bike </i>	chỉ đường_ xe máy
<i class="material-icons custom">directions_boat</i>	directions_boat
<i class="material-icons custom">directions_bus</i>	directions_bus
<i class="material-icons custom">directions_car</i>	directions_car
<i class="material-icons custom">directions_railway</i>	directions_railway
<i class="material-icons custom">directions_run</i>	directions_run
<i class="material-icons custom">directions_subway</i>	directions_subway
<i class="material-icons custom">directions_transit</i>	directions_transit
<i class="material-icons custom">directions_walk</i>	directions_walk
<i class="material-icons custom">flight</i>	flight
<i class="material-icons custom">hotel</i>	hotel
<i class="material-icons custom">layers</i>	layers
<i class="material-icons custom">layers_clear</i>	layers_clear
<i class="material-icons custom">local_activity</i>	local_activity
<i class="material-icons custom">local_airport</i>	local_airport
<i class="material-icons custom">local_atm</i>	local_atm
<i class="material-icons custom">local_bar</i>	local_bar
<i class="material-icons custom">local_cafe</i>	local_cafe
<i class="material-icons custom">local_car_wash</i>	local_car_wash
<i class="material-icons custom">local_convenience_store</i>	local_convenience_store
<i class="material-icons custom">local_dining</i>	local_dining
<i class="material-icons custom">local_drink</i>	local_drink
<i class="material-icons custom">local_florist</i>	local_florist
<i class="material-icons custom">local_gas_station</i>	local_gas_station
<i class="material-icons custom">local_grocery_store</i>	local_grocery_store
<i class="material-icons custom">local_hospital</i>	local_hospital
<i class="material-icons custom">local_hotel</i>	local_hotel
<i class="material-icons custom">local_laundry_service</i>	local_laundry_service
<i class="material-icons custom">local_library</i>	local_library
<i class="material-icons custom">local_mall</i>	local_mall
<i class="material-icons custom">local_movies</i>	local_movies
<i class="material-icons custom">local_offer</i>	local_offer
<i class="material-icons custom">local_parking</i>	local_parking
<i class="material-icons custom">local_pharmacy</i>	local_pharmacy
<i class="material-icons custom">local_phone</i>	local_phone
<i class="material-icons custom">local_pizza</i>	local_pizza
<i class="material-icons custom">local_play</i>	local_play
<i class="material-icons custom">local_post_office</i>	local_post_office
<i class="material-icons custom">local_printshop</i>	local_printshop
<i class="material-icons custom">local_see</i>	local_see
<i class="material-icons custom">local_shipping</i>	local_shipping
<i class="material-icons custom">local_taxi</i>	local_taxi
<i class="material-icons custom">map</i>	map
<i class="material-icons custom">my_location</i>	my_location
<i class="material-icons custom">navigation</i>	navigation
<i class="material-icons custom">person_pin</i>	person_pin
<i class="material-icons custom">pin_drop</i>	pin_drop
<i class="material-icons custom">place</i>	place
<i class="material-icons custom">rate_review</i>	rate_review
<i class="material-icons custom">restaurant_menu</i>	restaurant_menu
<i class="material-icons custom">satellite</i>	satellite
<i class="material-icons custom">store_mall_directory</i>	store_mall_directory
<i class="material-icons custom">traffic</i>	traffic
<i class="material-icons custom">terrain</i>	terrain

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">apps</i>	apps
<i class="material-icons custom">arrow_back</i>	arrow_back
<i class="material-icons custom">arrow_drop_down</i>	arrow_drop_down
<i class="material-icons custom">arrow_drop_down_circle</i>	arrow_drop_down_circle
<i class="material-icons custom">arrow_drop_up</i>	arrow_drop_up
<i class="material-icons custom">arrow_forward</i>	arrow_forward
<i class="material-icons custom">cancel</i>	cancel
<i class="material-icons custom">check</i>	check
<i class="material-icons custom">chevron_left</i>	chevron_left
<i class="material-icons custom">chevron_right</i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">adb</i>	adb
<i class="material-icons custom">airline_seat_flat</i>	airline_seat_flat
<i class="material-icons custom">airline_seat_flat_angled</i>	airline_seat_flat_angled
<i class="material-icons custom">airline_seat_individual_suite</i>	airline_seat_individual_suite
<i class="material-icons custom">airline_seat_legroom_reduced</i>	airline_seat_legroom_reduced
<i class="material-icons custom">airline_seat_recline_extra</i>	airline_seat_recline_extra
<i class="material-icons custom">airline_seat_recline_normal</i>	airline_seat_recline_normal
<i class="material-icons custom">bluetooth_audio</i>	bluetooth_audio
<i class="material-icons custom">confirmation_number</i>	confirmation_number
<i class="material-icons custom">disc_full</i>	disc_full
<i class="material-icons custom">do_not_disturb</i>	do_not_disturb
<i class="material-icons custom">do_not_disturb_alt</i>	do_not_disturb_alt
<i class="material-icons custom">drive_eta</i>	drive_eta
<i class="material-icons custom">event_available</i>	event_available
<i class="material-icons custom">event_busy</i>	event_busy
<i class="material-icons custom">event_note</i>	event_note
<i class="material-icons custom">folder_special</i>	folder_special
<i class="material-icons custom">live_tv</i>	live_tv
<i class="material-icons custom">mms</i>	mms
<i class="material-icons custom">more</i>	more
<i class="material-icons custom">network_locked</i>	network_locked
<i class="material-icons custom">ondemand_video</i>	ondemand_video
<i class="material-icons custom">personal_video</i>	personal_video
<i class="material-icons custom">phone_bluetooth_speaker</i>	phone_bluetooth_speaker
<i class="material-icons custom">phone_forwarded</i>	phone_forwarded
<i class="material-icons custom">phone_in_talk</i>	phone_in_talk
<i class="material-icons custom">phone_locked</i>	phone_locked
<i class="material-icons custom">phone_missed</i>	phone_missed
<i class="material-icons custom">phone_paused</i>	phone_paused
<i class="material-icons custom">power</i>	power
<i class="material-icons custom">sd_card</i>	sd_card
<i class="material-icons custom">sim_card_alert</i>	sim_card_alert
<i class="material-icons custom">sms</i>	sms
<i class="material-icons custom">sms_failed</i>	sms_failed
<i class="material-icons custom">sync</i>	sync
<i class="material-icons custom">sync_disabled</i>	sync_disabled
<i class="material-icons custom">sync_problem</i>	sync_problem
<i class="material-icons custom">system_update</i>	system_update
<i class="material-icons custom">tap_and_play</i>	tap_and_play
<i class="material-icons custom">time_to_leave</i>	time_to_leave
<i class="material-icons custom">vibration</i>	vibration
<i class="material-icons custom">voice_chat</i>	voice_chat
<i class="material-icons custom">vpn_lock</i>	vpn_lock
<i class="material-icons custom">wc</i>	wc
<i class="material-icons custom">wifi</i>	wifi

Chương này giải thích cách sử dụng các biểu tượng Xã hội (Vật chất) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Xã hội (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> cake </i>	bánh ngọt
<i class = "material-icon custom"> domain </i>	miền
<i class = "material-icon custom"> group </i>	nhóm
<i class = "material-icon custom"> group_add </i>	group_add
<i class = "material-icon custom"> location_city </i>	location_city
<i class = "material-icon custom"> mood </i>	tâm trạng
<i class = "material-icon custom"> mood_bad </i>	mood_bad
<i class = "material-icon custom"> thông báo </i>	thông báo
<i class = "material-icon custom"> notification_active </i>	thông báo_ hoạt động
<i class = "material-icon custom"> notification_none </i>	notification_none
<i class = "material-icon custom"> notification_off </i>	notification_off
<i class = "material-icon custom"> notification_paused </i>	thông báo_ tạm dừng
<i class = "material-icon custom"> trang </i>	trang
<i class = "material-icon custom"> party_mode </i>	chế độ tiệc tùng
<i class = "material-icon custom"> people </i>	Mọi người
<i class = "material-icon custom"> people_outline </i>	people_outline
<i class = "material-icon custom"> người </i>	người
<i class = "material-icon custom"> person_add </i>	person_add
<i class = "material-icon custom"> person_outline </i>	person_outline
<i class = "material-icon custom"> plus_one </i>	cộng một
<i class = "material-icon custom"> thăm dò ý kiến </i>	cuộc thăm dò ý kiến
<i class = "material-icon custom"> public </i>	công cộng
<i class = "material-icon custom"> school </i>	trường học
<i class = "material-icon custom"> share </i>	chia sẻ
<i class = "material-icon custom"> whatshot </i>	có gì nóng

Chương này giải thích cách sử dụng các biểu tượng Chuyển đổi (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel =  "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Chuyển đổi (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> check_box </i>	check_box
<i class = "material-icon custom"> check_box_outline_blank </i>	check_box_outline_blank
<i class = "material-icon custom"> indetermina_check_box </i>	indeterminamina_check_box
<i class = "material-icon custom"> radio_button_checked </i>	radio_button_checked
<i class = "material-icon custom"> radio_button_unchecked </i>	radio_button_unchecked
<i class = "material-icon custom"> sao </i>	ngôi sao
<i class = "material-icon custom"> star_border </i>	star_border
<i class = "material-icon custom"> star_half </i>	star_half

Đây là thư viện các biểu tượng đơn sắc có sẵn ở định dạng ảnh raster, định dạng ảnh vectơ và dưới dạng phông chữ. Nó cung cấp hơn 250 glyphs ở định dạng phông chữ. Bạn có thể sử dụng các phông chữ này trong các dự án web của mình. Những glyph này không miễn phí, tuy nhiên nếu bạn không phải chi bất kỳ chi phí nào trong trường hợp bạn đang sử dụng chúng trong các dự án dựa trên Bootstrap.

Đang tải Phông chữ (thư viện)

Để tải thư viện Bootstrap Glyphicons, 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

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

Bootstrap Glyphicons 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 cái cây và tên lớp của nó làtree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </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ó trong CSS và sử dụng nó cùng với tên lớp như hình dưới đây. Trong ví dụ sau, chúng tôi đã xác định kích thước là 6 em.

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

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

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

Bạn có thể xác định màu của biểu tượng bằng CSS. Ví dụ minh họa sau đây cho thấy cách thay đổi màu của biểu tượng cây.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

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

Chương này giải thích cách sử dụng Bootstrap Glyphicons (Thành phần). Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

Bảng sau đây chứa cách sử dụng và kết quả của Bootstrap Glyphicons (Thành phần). Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "glyphicon glyphicon-asterisk custom"> </i>
<i class = "glyphicon glyphicon-plus custom"> </i>
<i class = "glyphicon glyphicon-euro custom"> </i>
<i class = "glyphicon glyphicon-trừ tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-cloud custom"> </i>
<i class = "glyphicon glyphicon-phong bì tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-pencil custom"> </i>
<i class = "glyphicon glyphicon-glass custom"> </i>
<i class = "glyphicon glyphicon-music custom"> </i>
<i class = "glyphicon glyphicon-search custom"> </i>
<i class = "glyphicon glyphicon-tim tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-star custom"> </i>
<i class = "glyphicon glyphicon-star-blank custom"> </i>
<i class = "glyphicon glyphicon-user custom"> </i>
<i class = "glyphicon glyphicon-film custom"> </i>
<i class = "glyphicon glyphicon-th-large custom"> </i>
<i class = "glyphicon glyphicon-th custom"> </i>
<i class = "glyphicon glyphicon-th-list custom"> </i>
<i class = "glyphicon glyphicon-ok custom"> </i>
<i class = "glyphicon glyphicon-remove custom"> </i>
<i class = "glyphicon glyphicon-zoom-in tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-zoom-out custom"> </i>
<i class = "glyphicon glyphicon-off custom"> </i>
<i class = "glyphicon glyphicon-signal custom"> </i>
<i class = "glyphicon glyphicon-cog custom"> </i>
<i class = "glyphicon glyphicon-thùng rác tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-home custom"> </i>
<i class = "glyphicon glyphicon-file custom"> </i>
<i class = "glyphicon glyphicon-time custom"> </i>
<i class = "glyphicon glyphicon-road custom"> </i>
<i class = "glyphicon glyphicon-download-alt custom"> </i>
<i class = "glyphicon glyphicon-tải xuống tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-upload custom"> </i>
<i class = "glyphicon glyphicon-inbox custom"> </i>
<i class = "glyphicon glyphicon-play-circle custom"> </i>
<i class = "glyphicon glyphicon-lặp lại tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-refresh tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-list-alt custom"> </i>
<i class = "glyphicon glyphicon-lock tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-flag custom"> </i>
<i class = "glyphicon glyphicon-tai nghe tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-volume-off custom"> </i>
<i class = "glyphicon glyphicon-volume-down custom"> </i>
<i class = "glyphicon glyphicon-volume-up custom"> </i>
<i class = "glyphicon glyphicon-qrcode custom"> </i>
<i class = "glyphicon glyphicon-mã vạch tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-tag tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-tags tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-book custom"> </i>
<i class = "glyphicon glyphicon-bookmark custom"> </i>
<i class = "glyphicon glyphicon-print custom"> </i>
<i class = "glyphicon glyphicon-camera tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-font custom"> </i>
<i class = "glyphicon glyphicon-bold custom"> </i>
<i class = "glyphicon glyphicon-italic custom"> </i>
<i class = "glyphicon glyphicon-text-height custom"> </i>
<i class = "glyphicon glyphicon-text-width custom"> </i>
<i class = "glyphicon glyphicon-align-left custom"> </i>
<i class = "glyphicon glyphicon-align-center custom"> </i>
<i class = "glyphicon glyphicon-align-right custom"> </i>
<i class = "glyphicon glyphicon-align-justify custom"> </i>
<i class = "glyphicon glyphicon-list custom"> </i>
<i class = "glyphicon glyphicon-indent-left custom"> </i>
<i class = "glyphicon glyphicon-indent-right custom"> </i>
<i class = "glyphicon glyphicon-facetime-video custom"> </i>
<i class = "glyphicon glyphicon-picture custom"> </i>
<i class = "glyphicon glyphicon-map-marker custom"> </i>
<i class = "glyphicon glyphicon-điều chỉnh tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-tint custom"> </i>
<i class = "glyphicon glyphicon-edit custom"> </i>
<i class = "glyphicon glyphicon-share custom"> </i>
<i class = "glyphicon glyphicon-kiểm tra tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-move custom"> </i>
<i class = "glyphicon glyphicon-step-back custom"> </i>
<i class = "glyphicon glyphicon-nhanh-lùi tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-back custom"> </i>
<i class = "glyphicon glyphicon-play custom"> </i>
<i class = "glyphicon glyphicon-pause custom"> </i>
<i class = "glyphicon glyphicon-stop custom"> </i>
<i class = "glyphicon glyphicon-forward custom"> </i>
<i class = "glyphicon glyphicon-tua nhanh tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-step-forward custom"> </i>
<i class = "glyphicon glyphicon-eject custom"> </i>
<i class = "glyphicon glyphicon-chevron-left custom"> </i>
<i class = "glyphicon glyphicon-chevron-right custom"> </i>
<i class = "glyphicon glyphicon-dấu cộng-dấu tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-dấu trừ-dấu tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-remove-sign custom"> </i>
<i class = "glyphicon glyphicon-ok-sign custom"> </i>
<i class = "glyphicon glyphicon-question-sign custom"> </i>
<i class = "glyphicon glyphicon-info-sign custom"> </i>
<i class = "glyphicon glyphicon-screenshot tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-remove-circle custom"> </i>
<i class = "glyphicon glyphicon-ok-circle custom"> </i>
<i class = "glyphicon glyphicon-ban-circle custom"> </i>
<i class = "glyphicon glyphicon-arrow-left custom"> </i>
<i class = "glyphicon glyphicon-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-share-alt custom"> </i>
<i class = "glyphicon glyphicon-resize-full custom"> </i>
<i class = "glyphicon glyphicon-resize-small custom"> </i>
<i class = "glyphicon glyphicon-exclamation-sign custom"> </i>
<i class = "glyphicon glyphicon-gift custom"> </i>
<i class = "glyphicon glyphicon-lá tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-fire custom"> </i>
<i class = "glyphicon glyphicon-eye-open custom"> </i>
<i class = "glyphicon glyphicon-eye-close custom"> </i>
<i class = "glyphicon glyphicon-warning-sign custom"> </i>
<i class = "glyphicon glyphicon-plane custom"> </i>
<i class = "glyphicon glyphicon-lịch tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-tùy chỉnh ngẫu nhiên"> </i>
<i class = "glyphicon glyphicon-comment custom"> </i>
<i class = "glyphicon glyphicon-magnet custom"> </i>
<i class = "glyphicon glyphicon-chevron-up custom"> </i>
<i class = "glyphicon glyphicon-chevron-down custom"> </i>
<i class = "glyphicon glyphicon-retweet tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-shopping-cart custom"> </i>
<i class = "glyphicon glyphicon-folder-close custom"> </i>
<i class = "glyphicon glyphicon-folder-open custom"> </i>
<i class = "glyphicon glyphicon-resize-vertical custom"> </i>
<i class = "glyphicon glyphicon-resize-ngang tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-hdd tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-bullhorn custom"> </i>
<i class = "glyphicon glyphicon-bell custom"> </i>
<i class = "glyphicon glyphicon-certificate custom"> </i>
<i class = "glyphicon glyphicon-thumbs-up tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-thumbs-down custom"> </i>
<i class = "glyphicon glyphicon-hand-right custom"> </i>
<i class = "glyphicon glyphicon-hand-left custom"> </i>
<i class = "glyphicon glyphicon-hand-up custom"> </i>
<i class = "glyphicon glyphicon-hand-down custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-left custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-global custom"> </i>
<i class = "glyphicon glyphicon-cờ lê tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-task custom"> </i>
<i class = "glyphicon glyphicon-filter custom"> </i>
<i class = "glyphicon glyphicon-cặp tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-fullscreen custom"> </i>
<i class = "glyphicon glyphicon-dashboard custom"> </i>
<i class = "glyphicon glyphicon-paperclip custom"> </i>
<i class = "glyphicon glyphicon-heart-blank custom"> </i>
<i class = "glyphicon glyphicon-link custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-pushpin custom"> </i>
<i class = "glyphicon glyphicon-usd custom"> </i>
<i class = "glyphicon glyphicon-gbp tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-sắp xếp tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-sort-by-alphabet custom"> </i>
<i class = "glyphicon glyphicon-sort-by-alphabet-alt custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order-alt custom"> </i>
<i class = "glyphicon glyphicon-sort-by-thuộc tính tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-sort-by-properties-alt tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-unhecked custom"> </i>
<i class = "glyphicon glyphicon-expand tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-sập-xuống tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-sập-up tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-log-in tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-flash custom"> </i>
<i class = "glyphicon glyphicon-log-out custom"> </i>
<i class = "glyphicon glyphicon-new-window custom"> </i>
<i class = "glyphicon glyphicon-record custom"> </i>
<i class = "glyphicon glyphicon-save custom"> </i>
<i class = "glyphicon glyphicon-open custom"> </i>
<i class = "glyphicon glyphicon lưu tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-import custom"> </i>
<i class = "glyphicon glyphicon-export custom"> </i>
<i class = "glyphicon glyphicon-gửi tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-floppy-disk custom"> </i>
<i class = "glyphicon glyphicon-floppy-lưu tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-floppy-remove custom"> </i>
<i class = "glyphicon glyphicon-floppy-save custom"> </i>
<i class = "glyphicon glyphicon-floppy-open custom"> </i>
<i class = "glyphicon glyphicon-credit-card custom"> </i>
<i class = "glyphicon glyphicon-chuyển tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-dao kéo tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-header custom"> </i>
<i class = "glyphicon glyphicon-nén tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-earphone tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-tháp tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-stats custom"> </i>
<i class = "glyphicon glyphicon-sd-video tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-hd-video tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-phụ đề tùy chỉnh"> </i>
<i class = "glyphicon glyphicon-sound-stereo custom"> </i>
<i class = "glyphicon glyphicon-sound-dolby custom"> </i>
<i class = "glyphicon glyphicon-sound-5-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-6-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-7-1 custom"> </i>
<i class = "glyphicon glyphicon-copyright-mark custom"> </i>
<i class = "glyphicon glyphicon-register-mark custom"> </i>
<i class = "glyphicon glyphicon-cloud-download custom"> </i>
<i class = "glyphicon glyphicon-cloud-upload custom"> </i>
<i class = "glyphicon glyphicon-tree-conifer custom"> </i>
<i class = "glyphicon glyphicon-cây-rụng lá tùy chỉnh"> </i>