Webアイコン-はじめに

アイコンは、Webページ上の特定のアクションまたは機能を表すために使用される記号です。アイコンは、ドキュメントだけでなくアプリケーションでも使用され、選択可能または選択不可のいずれかです。たとえば、アプリケーションのボタンに表示される画像はすべてアイコンであり、これらのボタンは選択可能です。同様に、会社のロゴとしてアイコンを使用する場合、通常は選択できません。

Windows環境では、システムボリュームをミュートすると、以下に示すようにアイコンの助けを借りて表示されます。

ミュート

Webアイコンを使用して、読み込みページ、無効なオプション、リンク、リダイレクトなどを表すことができます。これらのアイコンは、反転、回転、サイズ変更、境界線、反転、および色付けできます。

アイコンフォント

アイコンフォントには、シンボルとグリフが含まれています。目的のフォントをロードすると、アイコンのクラス名を使用して、そのフォントで提供される任意のアイコンを使用できます。また、CSSプロパティを使用して、アイコンに異なる色を適用し、サイズを変更することもできます。アイコンを提供するアイコンライブラリ（フォント）がいくつかあります。このチュートリアルでは、3つの主要なフォントに焦点を当てています-

素晴らしいフォント
ブートストラップグリフィコン
Googleのマテリアルアイコン

素晴らしいフォント

このフォントは、519の無料のスケーラブルなベクターアイコンを提供します。このライブラリは、個人用と商用用の両方で完全に無料です。これらのアイコンは簡単にカスタマイズできます。もともと、それらはブートストラップ用に開発されました。

ブートストラップグリフィコン

これは、ラスターイメージ形式、ベクターイメージ形式、およびフォントとして使用可能なモノクロアイコンのライブラリです。フォント形式で250以上のグリフを提供します。これらのフォントをWebプロジェクトで使用できます。これらのアイコンは無料ではありませんが、Bootstrapベースのプロジェクトで購入することなく使用できます。

Googleのマテリアルアイコン

Googleは、「マテリアルデザインガイドライン」に基づいてデザインされた約750個のアイコンを提供しており、これらは*マテリアルデザイン*アイコンとして知られています。これらのアイコンはシンプルで、最新のすべてのWebブラウザーをサポートしています。これらのアイコンはベクターベースであるため、同様にスケーラブルです。これらのアイコンを使用するには、フォント（ライブラリ） material-icons をロードする必要があります。

フォントの素晴らしいアイコン

Font Awesomeアイコンライブラリは、519の無料のスケーラブルなベクターアイコンを提供します。このライブラリは、個人および商用の両方で完全に無料です。もともとブートストラップ用に設計されたこれらのアイコンは、簡単にカスタマイズできます。

フォントライブラリの読み込み

Font Awesomeライブラリを読み込むには、Webページの<head>セクションに次の行をコピーして貼り付けます。

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

アイコンを使用する

Font Awesomeはいくつかのアイコンを提供します。いずれかを選択し、アイコンクラスの名前を<body>タグ内のHTML要素に追加します。次の例では、インドの通貨のアイコンを使用しています。

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

それは次の出力を生成します-

サイズの定義

以下に示すように、CSSを使用してアイコンのサイズを定義し、クラス名とともに使用することにより、アイコンのサイズを拡大または縮小できます。この例では、サイズを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>

それは次の出力を生成します-

色の定義

サイズと同様に、CSSを使用してアイコンの色を定義できます。次の例は、インドの通貨アイコンの色を変更する方法を示しています。

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

カテゴリー一覧

Font Awesomeは、次のカテゴリで519個のアイコンを提供します-

Webアプリケーションのアイコン
手のアイコン
交通機関のアイコン
性別アイコン
ファイルタイプアイコン
スピナーアイコン
フォームコントロールアイコン
支払いアイコン
グラフアイコン
通貨アイコン
テキストエディターアイコン
方向アイコン
ビデオプレーヤーのアイコン
ブランドアイコン

これらのアイコンを使用するには、この章で説明するプログラムのクラス名を目的のアイコンのクラス名に置き換える必要があります。この単元の次の章（Font Awesome）では、さまざまなFont Awesomeアイコンの使用方法とそれぞれの出力をカテゴリごとに説明しました。

Font Awesome-Webアプリケーションアイコン

この章では、Font Awesome Web Applicationアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表は、Font Awesome Web Applicationアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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-automobile 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-bars 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-bicycle custom"></i>	__
<i class="fa fa-battery-0 custom"></i>	__
<i class="fa fa-battery-1 custom"></i>	__
<i class="fa fa-battery-2 custom"></i>	__
<i class="fa fa-battery-3 custom"></i>	__
<i class="fa fa-battery-4 custom"></i>	__
<i class="fa fa-battery-empty custom"></i>	__
<i class="fa fa-battery-quarter custom"></i>	__
<i class="fa fa-battery-half custom"></i>	__
<i class="fa fa-battery-three-quarters custom"></i>	__
<i class="fa fa-battery-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-briefcase custom"></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-minus-o custom"></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-commenting custom"></i>	__
<i class="fa fa-commenting-o custom"></i>	__
<i class="fa fa-comments custom"></i>	__
<i class="fa fa-comments-o custom"></i>	__
<i class="fa fa-compass custom"></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-cutlery 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-envelope custom"></i>	__
<i class="fa fa-envelope-o custom"></i>	__
<i class="fa fa-envelope-square custom"></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-triangle custom"></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-eyedropper 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-fighter-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-extinguisher 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-globe custom"></i>	__
<i class="fa fa-graduation-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-scissors-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-headphones 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-hourglass-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-institution 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-lemon-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-signs custom"></i>	__
<i class="fa fa-meh-o custom"></i>	__
<i class="fa fa-microphone custom"></i>	__
<i class="fa fa-microphone-slash custom"></i>	__
<i class="fa fa-minus custom"></i>	__
<i class="fa fa-minus-circle custom"></i>	__
<i class="fa fa-minus-square custom"></i>	__
<i class="fa fa-minus-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-mortar-board custom"></i>	__
<i class="fa fa-motorcycle 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-registered 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-minus 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-shuttle custom"></i>	__
<i class="fa fa-spinner custom"></i>	__
<i class="fa fa-spoon 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-empty 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-sticky-note custom"></i>	__
<i class="fa fa-sticky-note-o custom"></i>	__
<i class="fa fa-street-view custom"></i>	__
<i class="fa fa-suitcase 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-tasks custom"></i>	__
<i class="fa fa-taxi custom"></i>	__
<i class="fa fa-television 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-trademark custom"></i>	__
<i class="fa fa-tras custom"></i>	__
<i class="fa fa-trash-o custom"></i>	__
<i class="fa fa-tree custom"></i>	__
<i class="fa fa-trophy 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-umbrella 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>	__

素晴らしいフォント-手のアイコン

この章では、Font Awesome Handアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Handアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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-scissors-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>	__

素晴らしいフォント-交通機関のアイコン

この章では、Font Awesome Transportationアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Transportationアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="fa fa-ambulance custom"></i>	__
<i class="fa fa-automobile custom"></i>	__
<i class="fa fa-bicycle 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-fighter-jet custom"></i>	__
<i class="fa fa-motorcycle 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-shuttle custom"></i>	__
<i class="fa fa-subway 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>	__

Font Awesome-性別アイコン

この章では、Font Awesome Genderアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Genderアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="fa fa-genderless custom"></i>	__
<i class="fa fa-intersex 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-mercury custom"></i>	__
<i class="fa fa-neuter custom"></i>	__
<i class="fa fa-transgender custom"></i>	__
<i class="fa fa-transgender-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>	__

Font Awesome-ファイルタイプアイコン

この章では、Font Awesome File Typeアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表は、Font Awesome File Typeアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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>	__

素晴らしいフォント-スピナーアイコン

この章では、Font Awesome Spinnerアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Spinnerアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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>	__

Font Awesome-フォームコントロールアイコン

この章では、Font Awesome Form Controlアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表は、Font Awesome Form Controlアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

使用法

結果

__

__

__

__

__

__

__

__

__

__

__

素晴らしいフォント-支払いアイコン

この章では、Font Awesome Paymentアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Paymentアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="fa fa-cc-amex custom"></i>	__
<i class="fa fa-cc-diners-club custom"></i>	__
<i class="fa fa-cc-discover custom"></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>	__

素晴らしいフォント-グラフアイコン

この章では、Font Awesome Chartアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Chartアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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>	__

素晴らしいフォント-通貨アイコン

この章では、Font Awesome Currencyアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Currencyアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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-rouble 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>	__

Font Awesome-テキストエディターアイコン

この章では、Font Awesome Text Editorアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表は、Font Awesome Text Editorアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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-broken custom"></i>	__
<i class="fa fa-clipboard custom"></i>	__
<i class="fa fa-columns custom"></i>	__
<i class="fa fa-copy custom"></i>	__
<i class="fa fa-cut custom"></i>	__
<i class="fa fa-dedent 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-outdent 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-rotate-left custom"></i>	__
<i class="fa fa-rotate-right custom"></i>	__
<i class="fa fa-save custom"></i>	__
<i class="fa fa-scissors 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>	__

素晴らしいフォント-方向アイコン

この章では、Font Awesome Directionalアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Directionalアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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>	__

Font Awesome-ビデオプレーヤーアイコン

この章では、Font Awesome Video Playerアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表は、Font Awesome Video Playerアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Icons
<i class="fa fa-arrows-alt custom"></i>	__
<i class="fa fa-backward custom"></i>	__
<i class="fa fa-compress custom"></i>	__
<i class="fa fa-eject custom"></i>	__
<i class="fa fa-expand custom"></i>	__
<i class="fa fa-fast-backward 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-backward 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>	__

Font Awesome-ブランドアイコン

この章では、Font Awesome Brandアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Font Awesome Brandアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Icons
<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-behance custom"></i>	__
<i class="fa fa-behance-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-buysellads custom"></i>	__
<i class="fa fa-cc-amex custom"></i>	__
<i class="fa fa-cc-diners-club custom"></i>	__
<i class="fa fa-cc-discover custom"></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-delicious custom"></i>	__
<i class="fa fa-deviantart 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-sellsy 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-shirtsinbulk custom"></i>	__
<i class="fa fa-simplybuilt 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-overflow 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-vine 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>	__

素晴らしいフォント-医療アイコン

この章では、Font Awesome Medicalアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表は、Font Awesome Medicalアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Icon
<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は、「材料設計ガイドライン」に基づいて設計された750個のアイコンセットを提供します。これらは Material Design アイコンとして知られています。これらのアイコンはシンプルで、最新のすべてのWebブラウザーをサポートしています。これらのアイコンはベクターベースであるため、同様にスケーラブルです。これらのアイコンを使用するには、フォント（ライブラリ） material-icons をロードする必要があります。

フォント（ライブラリ）の読み込み

マテリアルアイコンライブラリを読み込むには、Webページの<head>セクションに次の行をコピーして貼り付けます。

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

アイコンを使用する

Googleのマテリアルアイコンは、アイコンの長いリストを提供します。それらのいずれかを選択し、アイコンクラスの名前を<body>タグ内のHTML要素に追加します。次の例では、アクションカテゴリに属する accessibility *という名前のアイコンを使用しています。

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

それは次の出力を生成します-

サイズの定義

以下に示すように、CSSでサイズを定義し、クラス名とともに使用することにより、アイコンのサイズを拡大または縮小できます。次の例では、サイズを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>

それは次の出力を生成します-

色の定義

CSSを使用して、アイコンの色を定義できます。次の例は、 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>

それは次の出力を生成します-

カテゴリー一覧

GoogleのMaterial Iconsフォントは、次のカテゴリで519個のアイコンを提供します-

アクションアイコン
警告アイコン
AVアイコン
通信アイコン
コンテンツアイコン
デバイスアイコン
エディターアイコン
ファイルアイコン
ハードウェアアイコン
画像アイコン
地図アイコン
ナビゲーションアイコン
通知アイコン
社会的なアイコン
アイコンの切り替え

これらのアイコンを使用するには、この章で説明するプログラムのクラス名を目的のアイコンのクラス名に置き換える必要があります。この単元の次の章（マテリアルアイコン）で、さまざまなマテリアルアイコンの使用方法とそれぞれの出力をカテゴリごとに説明しました。

素材-アクションアイコン

この章では、Googleの（素材）アクションアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）アクションアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">3d_rotation</i>	3d_rotation
<i class="material-icons custom">accessibility</i>	accessibility
<i class="material-icons custom">account_balance</i>	account_balance
<i class="material-icons custom">account_balance_wallet</i>	account_balance_wallet
<i class="material-icons custom">account_box</i>	account_box
<i class="material-icons custom">account_circle</i>	account_circle
<i class="material-icons custom">add_shopping_cart</i>	add_shopping_cart
<i class="material-icons custom">alarm</i>	alarm
<i class="material-icons custom">alarm_add</i>	alarm_add
<i class="material-icons custom">alarm_off</i>	alarm_off
<i class="material-icons custom">alarm_on</i>	alarm_on
<i class="material-icons custom">android</i>	android
<i class="material-icons custom">announcement</i>	announcement
<i class="material-icons custom">aspect_ratio</i>	aspect_ratio
<i class="material-icons custom">assessment</i>	assessment
<i class="material-icons custom">assignment</i>	assignment
<i class="material-icons custom">assignment_ind</i>	assignment_ind
<i class="material-icons custom">assignment_late</i>	assignment_late
<i class="material-icons custom">assignment_return</i>	assignment_return
<i class="material-icons custom">assignment_returned</i>	assignment_returned
<i class="material-icons custom">assignment_turned_in</i>	assignment_turned_in
<i class="material-icons custom">autorenew</i>	autorenew
<i class="material-icons custom">backup</i>	backup
<i class="material-icons custom">book</i>	book
<i class="material-icons custom">bookmark</i>	bookmark
<i class="material-icons custom">bookmark_border</i>	bookmark_border
<i class="material-icons custom">bug_report</i>	bug_report
<i class="material-icons custom">build</i>	build
<i class="material-icons custom">cached</i>	cached
<i class="material-icons custom">camera_enhance</i>	camera_enhance
<i class="material-icons custom">card_giftcard</i>	card_giftcard
<i class="material-icons custom">card_membership</i>	card_membership
<i class="material-icons custom">card_travel</i>	card_travel
<i class="material-icons custom">change_history</i>	change_history
<i class="material-icons custom">check_circle</i>	check_circle
<i class="material-icons custom">chrome_reader_mode</i>	chrome_reader_mode
<i class="material-icons custom">class</i>	class
<i class="material-icons custom">code</i>	code
<i class="material-icons custom">credit_card</i>	credit_card
<i class="material-icons custom">dashboard</i>	dashboard
<i class="material-icons custom">delete</i>	delete
<i class="material-icons custom">description</i>	description
<i class="material-icons custom">dns</i>	dns
<i class="material-icons custom">done</i>	done
<i class="material-icons custom">done_all</i>	done_all
<i class="material-icons custom">eject</i>	eject
<i class="material-icons custom">event</i>	event
<i class="material-icons custom">event_seat</i>	event_seat
<i class="material-icons custom">exit_to_app</i>	exit_to_app
<i class="material-icons custom">explore</i>	explore
<i class="material-icons custom">extension</i>	extension
<i class="material-icons custom">face</i>	face
<i class="material-icons custom">favorite</i>	favorite
<i class="material-icons custom">favorite_border</i>	favorite_border
<i class="material-icons custom">feedback</i>	feedback
<i class="material-icons custom">find_in_page</i>	find_in_page
<i class="material-icons custom">find_replace</i>	find_replace
<i class="material-icons custom">flight_land</i>	flight_land
<i class="material-icons custom">flight_takeoff</i>	flight_takeoff
<i class="material-icons custom">flip_to_back</i>	flip_to_back
<i class="material-icons custom">flip_to_front</i>	flip_to_front
<i class="material-icons custom">get_app</i>	get_app
<i class="material-icons custom">gif</i>	gif
<i class="material-icons custom">grade</i>	grade
<i class="material-icons custom">group_work</i>	group_work
<i class="material-icons custom">help</i>	help
<i class="material-icons custom">help_outline</i>	help_outline
<i class="material-icons custom">highlight_off</i>	highlight_off
<i class="material-icons custom">history</i>	history
<i class="material-icons custom">home</i>	home
<i class="material-icons custom">hourglass_empty</i>	hourglass_empty
<i class="material-icons custom">hourglass_full</i>	hourglass_full
<i class="material-icons custom">http</i>	http
<i class="material-icons custom">https</i>	https
<i class="material-icons custom">info</i>	info
<i class="material-icons custom">info_outline</i>	info_outline
<i class="material-icons custom">input</i>	input
<i class="material-icons custom">invert_colors</i>	invert_colors
<i class="material-icons custom">label</i>	label
<i class="material-icons custom">label_outline</i>	label_outline
<i class="material-icons custom">language</i>	language
<i class="material-icons custom">launch</i>	launch
<i class="material-icons custom">list</i>	list
<i class="material-icons custom">lock</i>	lock
<i class="material-icons custom">lock_open</i>	lock_open
<i class="material-icons custom">lock_outline</i>	lock_outline
<i class="material-icons custom">loyalty</i>	loyalty
<i class="material-icons custom">markunread_mailbox</i>	markunread_mailbox
<i class="material-icons custom">note_add</i>	note_add
<i class="material-icons custom">offline_pin</i>	offline_pin
<i class="material-icons custom">open_in_browser</i>	open_in_browser
<i class="material-icons custom">open_in_new</i>	open_in_new
<i class="material-icons custom">open_with</i>	open_with
<i class="material-icons custom">pageview</i>	pageview
<i class="material-icons custom">payment</i>	payment
<i class="material-icons custom">perm_camera_mic</i>	perm_camera_mic
<i class="material-icons custom">perm_contact_cale</i>	perm_contact_cale
<i class="material-icons custom">perm_data_settings</i>	perm_data_settings
<i class="material-icons custom">perm_device_information</i>	perm_device_information
<i class="material-icons custom">perm_identity</i>	perm_identity
<i class="material-icons custom">perm_media</i>	perm_media
<i class="material-icons custom">perm_phone_msg</i>	perm_phone_msg
<i class="material-icons custom">perm_scan_wifi</i>	perm_scan_wifi
<i class="material-icons custom">picture_in_picture</i>	picture_in_picture
<i class="material-icons custom">play_for_work</i>	play_for_work
<i class="material-icons custom">polymer</i>	polymer
<i class="material-icons custom">power_settings_new</i>	power_settings_new
<i class="material-icons custom">print</i>	print
<i class="material-icons custom">query_builder</i>	query_builder
<i class="material-icons custom">question_answer</i>	question_answer
<i class="material-icons custom">receipt</i>	receipt
<i class="material-icons custom">redeem</i>	redeem
<i class="material-icons custom">reorder</i>	reorder
<i class="material-icons custom">report_problem</i>	report_problem
<i class="material-icons custom">restore</i>	restore
<i class="material-icons custom">room</i>	room
<i class="material-icons custom">schedule</i>	schedule
<i class="material-icons custom">search</i>	search
<i class="material-icons custom">settings</i>	settings
<i class="material-icons custom">settings_applications</i>	settings_applications
<i class="material-icons custom">settings_bluetooth</i>	settings_bluetooth
<i class="material-icons custom">settings_brightness</i>	settings_brightness
<i class="material-icons custom">settings_cell</i>	settings_cell
<i class="material-icons custom">settings_ethernet</i>	settings_ethernet
<i class="material-icons custom">settings_input_antenna</i>	settings_input_antenna
<i class="material-icons custom">settings_input_component</i>	settings_input_component
<i class="material-icons custom">settings_input_hdmi</i>	settings_input_hdmi
<i class="material-icons custom">settings_input_svideo</i>	settings_input_svideo
<i class="material-icons custom">settings_overscan</i>	settings_overscan
<i class="material-icons custom">settings_phone</i>	settings_phone
<i class="material-icons custom">settings_power</i>	settings_power
<i class="material-icons custom">settings_remote</i>	settings_remote
<i class="material-icons custom">settings_voice</i>	settings_voice
<i class="material-icons custom">shop</i>	shop
<i class="material-icons custom">shop_two</i>	shop_two
<i class="material-icons custom">shopping_basket</i>	shopping_basket
<i class="material-icons custom">shopping_cart</i>	shopping_cart
<i class="material-icons custom">speaker_notes</i>	speaker_notes
<i class="material-icons custom">spellcheck</i>	spellcheck
<i class="material-icons custom">star_rate</i>	star_rate
<i class="material-icons custom">stars</i>	stars
<i class="material-icons custom">store</i>	store
<i class="material-icons custom">subject</i>	subject
<i class="material-icons custom">supervisor_account</i>	supervisor_account
<i class="material-icons custom">swap_horiz</i>	swap_horiz
<i class="material-icons custom">swap_vert</i>	swap_vert
<i class="material-icons custom">swap_vertical_circle</i>	swap_vertical_circle
<i class="material-icons custom">system_update_alt</i>	system_update_alt
<i class="material-icons custom">tab</i>	tab
<i class="material-icons custom">tab_unselected</i>	tab_unselected
<i class="material-icons custom">theaters</i>	theaters
<i class="material-icons custom">thumb_down</i>	thumb_down
<i class="material-icons custom">thumb_up</i>	thumb_up
<i class="material-icons custom">thumbs_up_down</i>	thumbs_up_down
<i class="material-icons custom">toc</i>	toc
<i class="material-icons custom">today</i>	today
<i class="material-icons custom">toll</i>	toll
<i class="material-icons custom">track_changes</i>	track_changes
<i class="material-icons custom">translate</i>	translate
<i class="material-icons custom">trending_down</i>	trending_down
<i class="material-icons custom">trending_flat</i>	trending_flat
<i class="material-icons custom">trending_up</i>	trending_up
<i class="material-icons custom">turned_in</i>	turned_in
<i class="material-icons custom">verified_user</i>	verified_user
<i class="material-icons custom">view_agenda</i>	view_agenda
<i class="material-icons custom">view_array</i>	view_array
<i class="material-icons custom">view_carousel</i>	view_carousel
<i class="material-icons custom">view_column</i>	view_column
<i class="material-icons custom">view_day</i>	view_day
<i class="material-icons custom">view_headline</i>	view_headline
<i class="material-icons custom">view_list</i>	view_list
<i class="material-icons custom">view_module</i>	view_module
<i class="material-icons custom">view_quilt</i>	view_quilt
<i class="material-icons custom">view_stream</i>	view_stream
<i class="material-icons custom">view_week</i>	view_week
<i class="material-icons custom">visibility</i>	visibility
<i class="material-icons custom">visibility_off</i>	visibility_off
<i class="material-icons custom">work</i>	work
<i class="material-icons custom">youtube_searched_for</i>	youtube_searched_for
<i class="material-icons custom">zoom_in</i>	zoom_in
<i class="material-icons custom">zoom_out</i>	zoom_out

材料-警告アイコン

この章では、Googleの（素材）アラートアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）アラートアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">add_alert</i>	add_alert
<i class="material-icons custom">error</i>	error
<i class="material-icons custom">error_outline</i>	error_outline
<i class="material-icons custom">warning</i>	warning

素材-AVアイコン

この章では、Google（素材）AVアイコンの使用法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）AVアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">airplay</i>	airplay
<i class="material-icons custom">album</i>	album
<i class="material-icons custom">av_timer</i>	av_timer
<i class="material-icons custom">closed_caption</i>	closed_caption
<i class="material-icons custom">equalizer</i>	equalizer
<i class="material-icons custom">explicit</i>	explicit
<i class="material-icons custom">fast_forward</i>	fast_forward
<i class="material-icons custom">fast_rewind</i>	fast_rewind
<i class="material-icons custom">forward_10</i>	forward_10
<i class="material-icons custom">forward_30</i>	forward_30
<i class="material-icons custom">forward_5</i>	forward_5
<i class="material-icons custom">games</i>	games
<i class="material-icons custom">hd</i>	hd
<i class="material-icons custom">hearing</i>	hearing
<i class="material-icons custom">high_quality</i>	high_quality
<i class="material-icons custom">library_add</i>	library_add
<i class="material-icons custom">library_books</i>	library_books
<i class="material-icons custom">library_music</i>	library_music
<i class="material-icons custom">loop</i>	loop
<i class="material-icons custom">mic</i>	mic
<i class="material-icons custom">mic_none</i>	mic_none
<i class="material-icons custom">mic_off</i>	mic_off
<i class="material-icons custom">movie</i>	movie
<i class="material-icons custom">pause_circle_outline</i>	pause_circle_outline
<i class="material-icons custom">new_releases</i>	new_releases
<i class="material-icons custom">not_interested</i>	not_interested
<i class="material-icons custom">pause</i>	pause
<i class="material-icons custom">pause_circle_filled</i>	pause_circle_filled
<i class="material-icons custom">play_arrow</i>	play_arrow
<i class="material-icons custom">play_circle_filled</i>	play_circle_filled
<i class="material-icons custom">play_circle_outline</i>	play_circle_outline
<i class="material-icons custom">playlist_add</i>	playlist_add
<i class="material-icons custom">queue</i>	queue
<i class="material-icons custom">queue_music</i>	queue_music
<i class="material-icons custom">radio</i>	radio
<i class="material-icons custom">recent_actors</i>	recent_actors
<i class="material-icons custom">repeat</i>	repeat
<i class="material-icons custom">repeat_one</i>	repeat_one
<i class="material-icons custom">replay</i>	replay
<i class="material-icons custom">airplay</i>	replay_10
<i class="material-icons custom">replay_30</i>	replay_30
<i class="material-icons custom">replay_5</i>	replay_5
<i class="material-icons custom">shuffle</i>	shuffle
<i class="material-icons custom">skip_next</i>	skip_next
<i class="material-icons custom">skip_previous</i>	skip_previous
<i class="material-icons custom">snooze</i>	snooze
<i class="material-icons custom">sort_by_alpha</i>	sort_by_alpha
<i class="material-icons custom">stop</i>	stop
<i class="material-icons custom">subtitles</i>	subtitles
<i class="material-icons custom">surround_sound</i>	surround_sound
<i class="material-icons custom">video_library</i>	video_library
<i class="material-icons custom">videocam</i>	videocam
<i class="material-icons custom">videocam_off</i>	videocam_off
<i class="material-icons custom">volume_down</i>	volume_down
<i class="material-icons custom">volume_mute</i>	volume_mute
<i class="material-icons custom">volume_off</i>	volume_off
<i class="material-icons custom">volume_up</i>	volume_up
<i class="material-icons custom">web</i>	web

材料-通信アイコン

この章では、Googleの（マテリアル）コミュニケーションアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）コミュニケーションアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">business</i>	business
<i class="material-icons custom">call</i>	call
<i class="material-icons custom">call_made</i>	call_made
<i class="material-icons custom">call_merge</i>	call_merge
<i class="material-icons custom">call_missed</i>	call_missed
<i class="material-icons custom">call_received</i>	call_received
<i class="material-icons custom">call_split</i>	call_split
<i class="material-icons custom">chat</i>	chat
<i class="material-icons custom">chat_bubble</i>	chat_bubble
<i class="material-icons custom">chat_bubble_outline</i>	chat_bubble_outline
<i class="material-icons custom">clear_all</i>	clear_all
<i class="material-icons custom">comment</i>	comment
<i class="material-icons custom">contact_phone</i>	contact_phone
<i class="material-icons custom">contacts</i>	contacts
<i class="material-icons custom">dialer_sip</i>	dialer_sip
<i class="material-icons custom">dialpad</i>	dialpad
<i class="material-icons custom">forum</i>	forum
<i class="material-icons custom">import_export</i>	import_export
<i class="material-icons custom">invert_colors_off</i>	invert_colors_off
<i class="material-icons custom">live_help</i>	live_help
<i class="material-icons custom">location_off</i>	location_off
<i class="material-icons custom">location_on</i>	location_on
<i class="material-icons custom">message</i>	message
<i class="material-icons custom">no_sim</i>	no_sim
<i class="material-icons custom">phone</i>	phone
<i class="material-icons custom">phonelink_erase</i>	phonelink_erase
<i class="material-icons custom">phonelink_lock</i>	phonelink_lock
<i class="material-icons custom">phonelink_ring</i>	phonelink_ring
<i class="material-icons custom">phonelink_setup</i>	phonelink_setup
<i class="material-icons custom">portable_wifi_off</i>	portable_wifi_off
<i class="material-icons custom">present_to_all</i>	present_to_all
<i class="material-icons custom">ring_volume</i>	ring_volume
<i class="material-icons custom">speaker_phone</i>	speaker_phone
<i class="material-icons custom">stay_current_landscape</i>	stay_current_landscape
<i class="material-icons custom">stay_current_portrait</i>	stay_current_portrait
<i class="material-icons custom">stay_primary_landscape</i>	stay_primary_landscape
<i class="material-icons custom">stay_primary_portrait</i>	stay_primary_portrait
<i class="material-icons custom">swap_calls</i>	swap_calls
<i class="material-icons custom">textsms</i>	textsms
<i class="material-icons custom">voicemail</i>	voicemail
<i class="material-icons custom">vpn_key</i>	vpn_key
<i class="material-icons custom">email</i>	email
<i class="material-icons custom">call_end</i>	call_end

素材-コンテンツアイコン

この章では、Googleの（素材）コンテンツアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）コンテンツアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">add</i>	add
<i class="material-icons custom">add_box</i>	add_box
<i class="material-icons custom">add_circle</i>	add_circle
<i class="material-icons custom">add_circle_outline</i>	add_circle_outline
<i class="material-icons custom">archive</i>	archive
<i class="material-icons custom">backspace</i>	backspace
<i class="material-icons custom">block</i>	block
<i class="material-icons custom">clear</i>	clear
<i class="material-icons custom">content_copy</i>	content_copy
<i class="material-icons custom">content_cut</i>	content_cut
<i class="material-icons custom">content_paste</i>	content_paste
<i class="material-icons custom">create</i>	create
<i class="material-icons custom">drafts</i>	drafts
<i class="material-icons custom">filter_list</i>	filter_list
<i class="material-icons custom">flag</i>	flag
<i class="material-icons custom">font_download</i>	font_download
<i class="material-icons custom">forward</i>	forward
<i class="material-icons custom">gesture</i>	gesture
<i class="material-icons custom">inbox</i>	inbox
<i class="material-icons custom">link</i>	link
<i class="material-icons custom">mail</i>	mail
<i class="material-icons custom">markunread</i>	markunread
<i class="material-icons custom">redo</i>	redo
<i class="material-icons custom">remove</i>	remove
<i class="material-icons custom">remove_circle</i>	remove_circle
<i class="material-icons custom">remove_circle_outline</i>	remove_circle_outline
<i class="material-icons custom">reply</i>	reply
<i class="material-icons custom">reply_all</i>	reply_all
<i class="material-icons custom">report</i>	report
<i class="material-icons custom">save</i>	save
<i class="material-icons custom">select_all</i>	select_all
<i class="material-icons custom">send</i>	send
<i class="material-icons custom">sort</i>	sort
<i class="material-icons custom">text_format</i>	text_format
<i class="material-icons custom">stay_current_portrait</i>	stay_current_portrait
<i class="material-icons custom">undo</i>	undo

素材-デバイスアイコン

この章では、Googleの（素材）デバイスアイコンの使用方法を説明します。 custom は、次に示すようにサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）デバイスアイコンの使用法と結果が含まれています。

Usage	Result
<i class="material-icons custom">access_alarm</i>	access_alarm
<i class="material-icons custom">access_alarms</i>	access_alarms
<i class="material-icons custom">access_time</i>	access_time
<i class="material-icons custom">add_alarm</i>	add_alarm
<i class="material-icons custom">airplanemode_active</i>	airplanemode_active
<i class="material-icons custom">airplanemode_inactive</i>	airplanemode_inactive
<i class="material-icons custom">battery_alert</i>	battery_alert
<i class="material-icons custom">battery_charging_full</i>	battery_charging_full
<i class="material-icons custom">battery_full</i>	battery_full
<i class="material-icons custom">battery_std</i>	battery_std
<i class="material-icons custom">battery_unknown</i>	battery_unknown
<i class="material-icons custom">bluetooth</i>	bluetooth
<i class="material-icons custom">bluetooth_connected</i>	bluetooth_connected
<i class="material-icons custom">bluetooth_disabled</i>	bluetooth_disabled
<i class="material-icons custom">bluetooth_searching</i>	bluetooth_searching
<i class="material-icons custom">brightness_auto</i>	brightness_auto
<i class="material-icons custom">brightness_high</i>	brightness_high
<i class="material-icons custom">brightness_low</i>	brightness_low
<i class="material-icons custom">brightness_medium</i>	brightness_medium
<i class="material-icons custom">data_usage</i>	data_usage
<i class="material-icons custom">developer_mode</i>	developer_mode
<i class="material-icons custom">devices</i>	devices
<i class="material-icons custom">dvr</i>	dvr
<i class="material-icons custom">gps_fixed</i>	gps_fixed
<i class="material-icons custom">gps_not_fixed</i>	gps_not_fixed
<i class="material-icons custom">gps_off</i>	gps_off
<i class="material-icons custom">graphic_eq</i>	graphic_eq
<i class="material-icons custom">location_disabled</i>	location_disabled
<i class="material-icons custom">location_searching</i>	location_searching
<i class="material-icons custom">network_cell</i>	network_cell
<i class="material-icons custom">network_wifi</i>	network_wifi
<i class="material-icons custom">screen_lock_landscape</i>	screen_lock_landscape
<i class="material-icons custom">screen_lock_portrait</i>	screen_lock_portrait
<i class="material-icons custom">screen_lock_rotation</i>	screen_lock_rotation
<i class="material-icons custom">screen_rotation</i>	screen_rotation
<i class="material-icons custom">sd_storage</i>	sd_storage
<i class="material-icons custom">settings_system_daydream</i>	settings_system_daydream
<i class="material-icons custom">signal_cellular_4_bar</i>	signal_cellular_4_bar
<i class="material-icons custom">wifi_tethering</i>	wifi_tethering
<i class="material-icons custom">signal_cellular_no_sim</i>	signal_cellular_no_sim
<i class="material-icons custom">signal_cellular_null</i>	signal_cellular_null
<i class="material-icons custom">signal_cellular_off</i>	signal_cellular_off
<i class="material-icons custom">signal_wifi_4_bar</i>	signal_wifi_4_bar
<i class="material-icons custom">signal_wifi_4_bar_lock</i>	signal_wifi_4_bar_lock
<i class="material-icons custom">signal_wifi_off</i>	signal_wifi_off
<i class="material-icons custom">storage</i>	storage
<i class="material-icons custom">usb</i>	usb
<i class="material-icons custom">wallpaper</i>	wallpaper
<i class="material-icons custom">widgets</i>	widgets
<i class="material-icons custom">wifi_lock</i>	wifi_lock
<i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i>	signal_cellular_connected_no_internet_4_bar

マテリアル-エディターアイコン

この章では、Googleの（マテリアル）エディターアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Googleの（マテリアル）エディターアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">attach_file</i>	attach_file
<i class="material-icons custom">attach_money</i>	attach_money
<i class="material-icons custom">border_all</i>	border_all
<i class="material-icons custom">border_bottom</i>	border_bottom
<i class="material-icons custom">border_clear</i>	border_clear
<i class="material-icons custom">border_color</i>	border_color
<i class="material-icons custom">border_horizontal</i>	border_horizontal
<i class="material-icons custom">border_inner</i>	border_inner
<i class="material-icons custom">border_left</i>	border_left
<i class="material-icons custom">border_outer</i>	border_outer
<i class="material-icons custom">border_right</i>	border_right
<i class="material-icons custom">border_style</i>	border_style
<i class="material-icons custom">border_top</i>	border_top
<i class="material-icons custom">border_vertical</i>	border_vertical
<i class="material-icons custom">format_align_center</i>	format_align_center
<i class="material-icons custom">format_align_justify</i>	format_align_justify
<i class="material-icons custom">format_align_left</i>	format_align_left
<i class="material-icons custom">format_align_right</i>	format_align_right
<i class="material-icons custom">format_bold</i>	format_bold
<i class="material-icons custom">format_clear</i>	format_clear
<i class="material-icons custom">format_color_fill</i>	format_color_fill
<i class="material-icons custom">format_color_reset</i>	format_color_reset
<i class="material-icons custom">format_color_text</i>	format_color_text
<i class="material-icons custom">format_indent_decrease</i>	format_indent_decrease
<i class="material-icons custom">format_indent_increase</i>	format_indent_increase
<i class="material-icons custom">format_italic</i>	format_italic
<i class="material-icons custom">format_line_spacing</i>	format_line_spacing
<i class="material-icons custom">format_list_bulleted</i>	format_list_bulleted
<i class="material-icons custom">format_list_numbered</i>	format_list_numbered
<i class="material-icons custom">format_paint</i>	format_paint
<i class="material-icons custom">format_quote</i>	format_quote
<i class="material-icons custom">format_size</i>	format_size
<i class="material-icons custom">format_strikethrough</i>	format_strikethrough
<i class="material-icons custom">format_textdirection_l_to_r</i>	format_textdirection_l_to_r
<i class="material-icons custom">format_textdirection_r_to_l</i>	format_textdirection_r_to_l
<i class="material-icons custom">format_underline</i>	format_underline
<i class="material-icons custom">functions</i>	functions
<i class="material-icons custom">insert_chart</i>	insert_chart
<i class="material-icons custom">insert_comment</i>	insert_comment
<i class="material-icons custom">insert_drive_file</i>	insert_drive_file
<i class="material-icons custom">insert_emoticon</i>	insert_emoticon
<i class="material-icons custom">insert_invitation</i>	insert_invitation
<i class="material-icons custom">insert_link</i>	insert_link
<i class="material-icons custom">insert_photo</i>	insert_photo
<i class="material-icons custom">merge_type</i>	merge_type
<i class="material-icons custom">mode_comment</i>	mode_comment
<i class="material-icons custom">mode_edit</i>	mode_edit
<i class="material-icons custom">money_off</i>	money_off
<i class="material-icons custom">publish</i>	publish
<i class="material-icons custom">space_bar</i>	space_bar
<i class="material-icons custom">strikethrough_s</i>	strikethrough_s
<i class="material-icons custom">vertical_align_bottom</i>	vertical_align_bottom
<i class="material-icons custom">vertical_align_center</i>	vertical_align_center
<i class="material-icons custom">vertical_align_top</i>	vertical_align_top
<i class="material-icons custom">wrap_text</i>	wrap_text

素材-ファイルアイコン

この章では、Googleの（素材）ファイルアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）ファイルアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">attachment</i>	attachment
<i class="material-icons custom">cloud</i>	cloud
<i class="material-icons custom">cloud_circle</i>	cloud_circle
<i class="material-icons custom">cloud_done</i>	cloud_done
<i class="material-icons custom">cloud_download</i>	cloud_download
<i class="material-icons custom">cloud_off</i>	cloud_off
<i class="material-icons custom">cloud_queue</i>	cloud_queue
<i class="material-icons custom">cloud_upload</i>	cloud_upload
<i class="material-icons custom">file_download</i>	file_download
<i class="material-icons custom">file_upload</i>	file_upload
<i class="material-icons custom">folder</i>	folder
<i class="material-icons custom">folder_open</i>	folder_open
<i class="material-icons custom">folder_shared</i>	folder_shared

素材-ハードウェアアイコン

この章では、Googleの（マテリアル）ハードウェアアイコンの使用法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）ハードウェアアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">cast</i>	cast
<i class="material-icons custom">cast_connected</i>	cast_connected
<i class="material-icons custom">computer</i>	computer
<i class="material-icons custom">desktop_mac</i>	desktop_mac
<i class="material-icons custom">desktop_windows</i>	desktop_windows
<i class="material-icons custom">developer_board</i>	developer_board
<i class="material-icons custom">device_hub</i>	device_hub
<i class="material-icons custom">dock</i>	dock
<i class="material-icons custom">gamepad</i>	gamepad
<i class="material-icons custom">headset</i>	headset
<i class="material-icons custom">headset_mic</i>	headset_mic
<i class="material-icons custom">keyboard</i>	keyboard
<i class="material-icons custom">keyboard_arrow_down</i>	keyboard_arrow_down
<i class="material-icons custom">keyboard_arrow_left</i>	keyboard_arrow_left
<i class="material-icons custom">keyboard_arrow_right</i>	keyboard_arrow_right
<i class="material-icons custom">keyboard_arrow_up</i>	keyboard_arrow_up
<i class="material-icons custom">keyboard_backspace</i>	keyboard_backspace
<i class="material-icons custom">keyboard_capslock</i>	keyboard_capslock
<i class="material-icons custom">keyboard_hide</i>	keyboard_hide
<i class="material-icons custom">keyboard_return</i>	keyboard_return
<i class="material-icons custom">keyboard_tab</i>	keyboard_tab
<i class="material-icons custom">keyboard_voice</i>	keyboard_voice
<i class="material-icons custom">laptop</i>	laptop
<i class="material-icons custom">laptop_chromebook</i>	laptop_chromebook
<i class="material-icons custom">laptop_mac</i>	laptop_mac
<i class="material-icons custom">laptop_windows</i>	laptop_windows
<i class="material-icons custom">memory</i>	memory
<i class="material-icons custom">mouse</i>	mouse
<i class="material-icons custom">phone_android</i>	phone_android
<i class="material-icons custom">phone_iphone</i>	phone_iphone
<i class="material-icons custom">phonelink</i>	phonelink
<i class="material-icons custom">phonelink_off</i>	phonelink_off
<i class="material-icons custom">power_input</i>	power_input
<i class="material-icons custom">router</i>	router
<i class="material-icons custom">scanner</i>	scanner
<i class="material-icons custom">security</i>	security
<i class="material-icons custom">sim_card</i>	sim_card
<i class="material-icons custom">smartphone</i>	smartphone
<i class="material-icons custom">speaker</i>	speaker
<i class="material-icons custom">speaker_group</i>	speaker_group
<i class="material-icons custom">tablet</i>	tablet
<i class="material-icons custom">tablet_android</i>	tablet_android
<i class="material-icons custom">tablet_mac</i>	tablet_mac
<i class="material-icons custom">toys</i>	toys
<i class="material-icons custom">tv</i>	tv
<i class="material-icons custom">watch</i>	watch

素材-画像アイコン

この章では、Googleの（素材）画像アイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）画像アイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">add_to_photos</i>	add_to_photos
<i class="material-icons custom">adjust</i>	adjust
<i class="material-icons custom">assistant</i>	assistant
<i class="material-icons custom">assistant</i>	assistant
<i class="material-icons custom">audiotrack</i>	audiotrack
<i class="material-icons custom">blur_circular</i>	blur_circular
<i class="material-icons custom">blur_linear</i>	blur_linear
<i class="material-icons custom">blur_off</i>	blur_off
<i class="material-icons custom">blur_on</i>	blur_on
<i class="material-icons custom">brightness_1</i>	brightness_1
<i class="material-icons custom">brightness_2</i>	brightness_2
<i class="material-icons custom">brightness_3</i>	brightness_3
<i class="material-icons custom">brightness_4</i>	brightness_4
<i class="material-icons custom">brightness_5</i>	brightness_5
<i class="material-icons custom">brightness_6</i>	brightness_6
<i class="material-icons custom">brightness_7</i>	brightness_7
<i class="material-icons custom">broken_image</i>	broken_image
<i class="material-icons custom">brush</i>	brush
<i class="material-icons custom">camera</i>	camera
<i class="material-icons custom">camera_alt</i>	camera_alt
<i class="material-icons custom">camera_front</i>	camera_front
<i class="material-icons custom">camera_rear</i>	camera_rear
<i class="material-icons custom">camera_roll</i>	camera_roll
<i class="material-icons custom">center_focus_strong</i>	center_focus_strong
<i class="material-icons custom">center_focus_weak</i>	center_focus_weak
<i class="material-icons custom">collections</i>	collections
<i class="material-icons custom">collections_bookmark</i>	collections_bookmark
<i class="material-icons custom">color_lens</i>	color_lens
<i class="material-icons custom">colorize</i>	colorize
<i class="material-icons custom">compare</i>	compare
<i class="material-icons custom">control_point</i>	control_point
<i class="material-icons custom">control_point_duplicate</i>	control_point_duplicate
<i class="material-icons custom">crop</i>	crop
<i class="material-icons custom">crop_16_9</i>	crop_16_9
<i class="material-icons custom">crop_3_2</i>	crop_3_2
<i class="material-icons custom">crop_5_4</i>	crop_5_4
<i class="material-icons custom">crop_7_5</i>	crop_7_5
<i class="material-icons custom">crop_din</i>	crop_din
<i class="material-icons custom">crop_free</i>	crop_free
<i class="material-icons custom">crop_landscape</i>	crop_landscape
<i class="material-icons custom">crop_original</i>	crop_original
<i class="material-icons custom">crop_portrait</i>	crop_portrait
<i class="material-icons custom">crop_square</i>	crop_square
<i class="material-icons custom">dehaze</i>	dehaze
<i class="material-icons custom">details</i>	details
<i class="material-icons custom">edit</i>	edit
<i class="material-icons custom">exposure</i>	exposure
<i class="material-icons custom">exposure_neg_1</i>	exposure_neg_1
<i class="material-icons custom">exposure_plus_1</i>	exposure_plus_1
<i class="material-icons custom">exposure_plus_2</i>	exposure_plus_2
<i class="material-icons custom">exposure_zero</i>	exposure_zero
<i class="material-icons custom">filter</i>	filter
<i class="material-icons custom">filter_1</i>	filter_1
<i class="material-icons custom">filter_2</i>	filter_2
<i class="material-icons custom">filter_3</i>	filter_3
<i class="material-icons custom">filter_4</i>	filter_4
<i class="material-icons custom">filter_5</i>	filter_5
<i class="material-icons custom">filter_6</i>	filter_6
<i class="material-icons custom">filter_7</i>	filter_7
<i class="material-icons custom">filter_8</i>	filter_8
<i class="material-icons custom">filter_9</i>	filter_9
<i class="material-icons custom">filter_9_plus</i>	filter_9_plus
<i class="material-icons custom">filter_b_and_w</i>	filter_b_and_w
<i class="material-icons custom">filter_center_focus</i>	filter_center_focus
<i class="material-icons custom">filter_drama</i>	filter_drama
<i class="material-icons custom">filter_frames</i>	filter_frames
<i class="material-icons custom">filter_hdr</i>	filter_hdr
<i class="material-icons custom">filter_none</i>	filter_none
<i class="material-icons custom">filter_tilt_shift</i>	filter_tilt_shift
<i class="material-icons custom">filter_vintage</i>	filter_vintage
<i class="material-icons custom">flare</i>	flare
<i class="material-icons custom">flash_auto</i>	flash_auto
<i class="material-icons custom">flash_off</i>	flash_off
<i class="material-icons custom">flash_on</i>	flash_on
<i class="material-icons custom">flip</i>	flip
<i class="material-icons custom">gradient</i>	gradient
<i class="material-icons custom">grain</i>	grain
<i class="material-icons custom">grid_off</i>	grid_off
<i class="material-icons custom">grid_on</i>	grid_on
<i class="material-icons custom">hdr_off</i>	hdr_off
<i class="material-icons custom">hdr_on</i>	hdr_on
<i class="material-icons custom">hdr_strong</i>	hdr_strong
<i class="material-icons custom">hdr_weak</i>	hdr_weak
<i class="material-icons custom">healing</i>	healing
<i class="material-icons custom">image</i>	image
<i class="material-icons custom">image_aspect_ratio</i>	image_aspect_ratio
<i class="material-icons custom">iso</i>	iso
<i class="material-icons custom">landscape</i>	landscape
<i class="material-icons custom">leak_add</i>	leak_add
<i class="material-icons custom">leak_remove</i>	leak_remove
<i class="material-icons custom">lens</i>	lens
<i class="material-icons custom">looks</i>	looks
<i class="material-icons custom">looks_3</i>	looks_3
<i class="material-icons custom">looks_4</i>	looks_4
<i class="material-icons custom">looks_5</i>	looks_5
<i class="material-icons custom">looks_6</i>	looks_6
<i class="material-icons custom">looks_one</i>	looks_one
<i class="material-icons custom">looks_two</i>	looks_two
<i class="material-icons custom">loupe</i>	loupe
<i class="material-icons custom">monochrome_photos</i>	monochrome_photos
<i class="material-icons custom">movie_creation</i>	movie_creation
<i class="material-icons custom">music_note</i>	music_note
<i class="material-icons custom">nature</i>	nature
<i class="material-icons custom">nature_people</i>	nature_people
<i class="material-icons custom">wb_sunny</i>	wb_sunny
<i class="material-icons custom">navigate_next</i>	navigate_next
<i class="material-icons custom">navigate_before</i>	navigate_before
<i class="material-icons custom">palette</i>	palette
<i class="material-icons custom">panorama</i>	panorama
<i class="material-icons custom">panorama_fish_eye</i>	panorama_fish_eye
<i class="material-icons custom">panorama_horizontal</i>	panorama_horizontal
<i class="material-icons custom">panorama_vertical</i>	panorama_vertical
<i class="material-icons custom">panorama_wide_angle</i>	panorama_wide_angle
<i class="material-icons custom">photo</i>	photo
<i class="material-icons custom">photo_album</i>	photo_album
<i class="material-icons custom">photo_camera</i>	photo_camera
<i class="material-icons custom">photo_library</i>	photo_library
<i class="material-icons custom">photo_size_select_actual</i>	photo_size_select_actual
<i class="material-icons custom">photo_size_select_large</i>	photo_size_select_large
<i class="material-icons custom">photo_size_select_small</i>	photo_size_select_small
<i class="material-icons custom">picture_as_pdf</i>	picture_as_pdf
<i class="material-icons custom">portrait</i>	portrait
<i class="material-icons custom">remove_red_eye</i>	remove_red_eye
<i class="material-icons custom">rotate_90_degrees_ccw</i>	rotate_90_degrees_ccw
<i class="material-icons custom">rotate_left</i>	rotate_left
<i class="material-icons custom">rotate_right</i>	rotate_right
<i class="material-icons custom">slideshow</i>	slideshow
<i class="material-icons custom">straighten</i>	straighten
<i class="material-icons custom">style</i>	style
<i class="material-icons custom">switch_camera</i>	switch_camera
<i class="material-icons custom">switch_video</i>	switch_video
<i class="material-icons custom">tag_faces</i>	tag_faces
<i class="material-icons custom">texture</i>	texture
<i class="material-icons custom">timelapse</i>	timelapse
<i class="material-icons custom">timer</i>	timer
<i class="material-icons custom">timer_10</i>	timer_10
<i class="material-icons custom">timer_3</i>	timer_3
<i class="material-icons custom">timer_off</i>	timer_off
<i class="material-icons custom">tonality</i>	tonality
<i class="material-icons custom">transform</i>	transform
<i class="material-icons custom">tune</i>	tune
<i class="material-icons custom">view_comfy</i>	view_comfy
<i class="material-icons custom">view_compact</i>	view_compact
<i class="material-icons custom">vignette</i>	vignette
<i class="material-icons custom">wb_auto</i>	wb_auto
<i class="material-icons custom">wb_cloudy</i>	wb_cloudy
<i class="material-icons custom">wb_incandescent</i>	wb_incandescent
<i class="material-icons custom">wb_iridescent</i>	wb_iridescent

マテリアル-マップアイコン

この章では、Google（マテリアル）マップアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（マテリアル）マップアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">beenhere</i>	beenhere
<i class="material-icons custom">directions</i>	directions
<i class="material-icons custom">directions_bike</i>	directions_bike
<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

素材-ナビゲーションアイコン

この章では、Googleの（マテリアル）ナビゲーションアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表に、Googleの（マテリアル）ナビゲーションアイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

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

素材-通知アイコン

この章では、Googleの（素材）通知アイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）通知アイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

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

素材-ソーシャルアイコン

この章では、Googleの（素材）ソーシャルアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）ソーシャルアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">cake</i>	cake
<i class="material-icons custom">domain</i>	domain
<i class="material-icons custom">group</i>	group
<i class="material-icons custom">group_add</i>	group_add
<i class="material-icons custom">location_city</i>	location_city
<i class="material-icons custom">mood</i>	mood
<i class="material-icons custom">mood_bad</i>	mood_bad
<i class="material-icons custom">notifications</i>	notifications
<i class="material-icons custom">notifications_active</i>	notifications_active
<i class="material-icons custom">notifications_none</i>	notifications_none
<i class="material-icons custom">notifications_off</i>	notifications_off
<i class="material-icons custom">notifications_paused</i>	notifications_paused
<i class="material-icons custom">pages</i>	pages
<i class="material-icons custom">party_mode</i>	party_mode
<i class="material-icons custom">people</i>	people
<i class="material-icons custom">people_outline</i>	people_outline
<i class="material-icons custom">person</i>	person
<i class="material-icons custom">person_add</i>	person_add
<i class="material-icons custom">person_outline</i>	person_outline
<i class="material-icons custom">plus_one</i>	plus_one
<i class="material-icons custom">poll</i>	poll
<i class="material-icons custom">public</i>	public
<i class="material-icons custom">school</i>	school
<i class="material-icons custom">share</i>	share
<i class="material-icons custom">whatshot</i>	whatshot

素材-アイコンの切り替え

この章では、Googleの（素材）トグルアイコンの使用方法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Googleの（素材）トグルアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">check_box</i>	check_box
<i class="material-icons custom">check_box_outline_blank</i>	check_box_outline_blank
<i class="material-icons custom">indeterminate_check_box</i>	indeterminate_check_box
<i class="material-icons custom">radio_button_checked</i>	radio_button_checked
<i class="material-icons custom">radio_button_unchecked</i>	radio_button_unchecked
<i class="material-icons custom">star</i>	star
<i class="material-icons custom">star_border</i>	star_border
<i class="material-icons custom">star_half</i>	star_half

ブートストラップグリフィコン

これは、ラスターイメージ形式、ベクターイメージ形式、およびフォントとして使用可能なモノクロアイコンのライブラリです。フォント形式で250以上のグリフを提供します。これらのフォントをWebプロジェクトで使用できます。これらのグリフは無料ではありませんが、Bootstrapベースのプロジェクトで使用する場合に何かを使う必要がない場合は無料です。

フォント（ライブラリ）の読み込み

Bootstrap Glyphiconsライブラリをロードするには、Webページの<head>セクションに次の行をコピーして貼り付けます。

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

アイコンを使用する

Bootstrap Glyphiconsには多数のアイコンが用意されています。それらのいずれかを選択し、アイコンクラスの名前を<body>タグ内のHTML要素に追加します。次の例では、ツリーのアイコンを使用しており、そのクラス名は 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>

それは次の出力を生成します-

サイズの定義

以下に示すように、CSSでサイズを定義し、クラス名とともに使用することにより、アイコンのサイズを拡大または縮小できます。次の例では、サイズを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>

次のような出力が生成されます。

色の定義

CSSを使用してアイコンの色を定義できます。次の例は、ツリーアイコンの色を変更する方法を示しています。

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

それは次の出力を生成します-

ブートストラップコンポーネント

この章では、Bootstrap Glyphicons（コンポーネント）の使用法について説明します。以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。

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

次の表には、Bootstrap Glyphicons（コンポーネント）の使用法と結果が含まれています。上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<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-minus custom"></i>	__
<i class="glyphicon glyphicon-cloud custom"></i>	__
<i class="glyphicon glyphicon-envelope custom"></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-heart custom"></i>	__
<i class="glyphicon glyphicon-star custom"></i>	__
<i class="glyphicon glyphicon-star-empty 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 custom"></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-trash custom"></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-download custom"></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-repeat custom"></i>	__
<i class="glyphicon glyphicon-refresh custom"></i>	__
<i class="glyphicon glyphicon-list-alt custom"></i>	__
<i class="glyphicon glyphicon-lock custom"></i>	__
<i class="glyphicon glyphicon-flag custom"></i>	__
<i class="glyphicon glyphicon-headphones custom"></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-barcode custom"></i>	__
<i class="glyphicon glyphicon-tag custom"></i>	__
<i class="glyphicon glyphicon-tags custom"></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 custom"></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-adjust custom"></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-check custom"></i>	__
<i class="glyphicon glyphicon-move custom"></i>	__
<i class="glyphicon glyphicon-step-backward custom"></i>	__
<i class="glyphicon glyphicon-fast-backward custom"></i>	__
<i class="glyphicon glyphicon-backward 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-fast-forward custom"></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-plus-sign custom"></i>	__
<i class="glyphicon glyphicon-minus-sign custom"></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 custom"></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-leaf custom"></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-calendar custom"></i>	__
<i class="glyphicon glyphicon-random custom"></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 custom"></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-horizontal custom"></i>	__
<i class="glyphicon glyphicon-hdd custom"></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 custom"></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-globe custom"></i>	__
<i class="glyphicon glyphicon-wrench custom"></i>	__
<i class="glyphicon glyphicon-tasks custom"></i>	__
<i class="glyphicon glyphicon-filter custom"></i>	__
<i class="glyphicon glyphicon-briefcase custom"></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-empty 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 custom"></i>	__
<i class="glyphicon glyphicon-sort custom"></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-attributes custom"></i>	__
<i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i>	__
<i class="glyphicon glyphicon-unchecked custom"></i>	__
<i class="glyphicon glyphicon-expand custom"></i>	__
<i class="glyphicon glyphicon-collapse-down custom"></i>	__
<i class="glyphicon glyphicon-collapse-up custom"></i>	__
<i class="glyphicon glyphicon-log-in custom"></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-saved custom"></i>	__
<i class="glyphicon glyphicon-import custom"></i>	__
<i class="glyphicon glyphicon-export custom"></i>	__
<i class="glyphicon glyphicon-send custom"></i>	__
<i class="glyphicon glyphicon-floppy-disk custom"></i>	__
<i class="glyphicon glyphicon-floppy-saved custom"></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-transfer custom"></i>	__
<i class="glyphicon glyphicon-cutlery custom"></i>	__
<i class="glyphicon glyphicon-header custom"></i>	__
<i class="glyphicon glyphicon-compressed custom"></i>	__
<i class="glyphicon glyphicon-earphone custom"></i>	__
<i class="glyphicon glyphicon-phone custom"></i>	__
<i class="glyphicon glyphicon-tower custom"></i>	__
<i class="glyphicon glyphicon-stats custom"></i>	__
<i class="glyphicon glyphicon-sd-video custom"></i>	__
<i class="glyphicon glyphicon-hd-video custom"></i>	__
<i class="glyphicon glyphicon-subtitles custom"></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-registration-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-tree-deciduous custom"></i>	__

Web-icons-quick-guide

Webアイコン-はじめに

アイコンフォント

素晴らしいフォント

ブートストラップグリフィコン

Googleのマテリアルアイコン

フォントの素晴らしいアイコン

フォントライブラリの読み込み

アイコンを使用する

サイズの定義

色の定義

カテゴリー一覧

Font Awesome-Webアプリケーションアイコン

素晴らしいフォント-手のアイコン

素晴らしいフォント-交通機関のアイコン

Font Awesome-性別アイコン

Font Awesome-ファイルタイプアイコン

素晴らしいフォント-スピナーアイコン

Font Awesome-フォームコントロールアイコン

素晴らしいフォント-支払いアイコン

素晴らしいフォント-グラフアイコン

素晴らしいフォント-通貨アイコン

Font Awesome-テキストエディターアイコン

素晴らしいフォント-方向アイコン

Font Awesome-ビデオプレーヤーアイコン

Font Awesome-ブランドアイコン

素晴らしいフォント-医療アイコン

素材アイコン

フォント（ライブラリ）の読み込み

アイコンを使用する

サイズの定義

色の定義

カテゴリー一覧

素材-アクションアイコン

材料-警告アイコン

素材-AVアイコン

材料-通信アイコン

素材-コンテンツアイコン

素材-デバイスアイコン

マテリアル-エディターアイコン

素材-ファイルアイコン

素材-ハードウェアアイコン

素材-画像アイコン

マテリアル-マップアイコン

素材-ナビゲーションアイコン

素材-通知アイコン

素材-ソーシャルアイコン

素材-アイコンの切り替え

ブートストラップグリフィコン

フォント（ライブラリ）の読み込み

アイコンを使用する

サイズの定義

色の定義

ブートストラップコンポーネント