Font Awesome 6：フルレビュー
Font Awesomeは、スケーラブルなベクトルアイコンのコレクションです。アイコンは、CSSプロパティを使用してフォーマットし、色、サイズ、影などを設定できます。フォントバージョン5.5.0には605アイコンが含まれています。
1 Font Awesomeをインストールする方法
方法1。
次のコードをに追加することにより、ファイルのfont-awesome.cssバージョンを使用します<head> セクション：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">フォントが接続されたら、サイトのアイコンを使用できます。
方法2。
Font Awesome からフォントをダウンロードしてください。アーカイブを開梱し、2つのフォルダーをアーカイブからサイトサーバー（CSSとフォント）にアップロードします。サイトにそのような名前が付いたフォルダーが既にある場合は、ダウンロードしたフォルダーからファイルを追加するだけです。
ファイルのフルバージョンまたはマイニファイドバージョンを使用できます。
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2フォントの素晴らしいアイコンの使用方法
アイコンは2つの方法でWebページに追加できます。<i> と<span> elements, またby adding them to the desired element using the :before, :after pseudo-elements とthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li：li：before {content： "\ f015";/ *ホームアイコンを追加 */font-family：fontawesome; color：#aaaaa; margin-right：10px;}1つの標準アイコン
Font Awesomeは、インライン要素で使用されるように設計されています。アイコンを追加するには、最初にFAクラスをに設定する必要があります<i> また<span> エレメント。
要素の前または後に選択したアイコンを追加するには、空です<i></i> また<span></span> 要素が要素に追加され、アイコンクラスが割り当てられ、スタイリングを拡張する追加のクラスが割り当てられます。
<i class="fa fa-camera-retro"></i>2つの大きなアイコン
コンテナに比べてアイコンのサイズを増やすには、FA-LG（33％の増加）、FA-2X、FA-3X、FA-4X、FA-5Xクラスを使用します。
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3固定幅アイコン
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation またlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> 家</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> としょうかん</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> アプリケーション</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> 設定</a ></li></ul>箇条書きリスト用の4つのアイコン
FA-ULおよびFA-LIクラスを使用して、デフォルトの弾丸をに置き換えます<ul>…</ul> 箇条書きリスト。
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>リストアイテムをリストします</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>リストアイテムをリストします</li> <li><i class="fa-li fa fa-square"></i>リストアイテムをリストします</li></ul>5つのフレーム付きアイコンと引用
Use the fa-border class to set the border for the icon. The pull-right とpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum dolor sit amet、conectetur adipiscing Elit。 Donec Nec Purus Cong、Posuere Libero in、Porta Sapien。 Sed Elit Lectusで。 SED LACUS ELIT、SEMPER VITAE FELIS ID、SODALES CONGUE SAPIEN。</p>6つのアニメーションアイコン
FA-SPIN、FA-PULSE、FA-REFRESH、FA-COGクラスを追加して、回転アイコンを設定します。アニメーションはIE8 -IE9ではサポートされていません。
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7つの変換されたアイコン
アイコンを回転またはフリップするには、fa-rotate-*およびfa-flip-*クラスを使用します。
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8つのコンビネーションアイコン
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, とfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes とcss code to insert using the content property
Webアプリケーションのアイコン fa -adjust- \ f042;FA -ANCHOR- \ f13d;
fa -archive- \ f187;
fa -arrows- \ f047;
fa -asterisk- \ f069;
faat- \ f1fa;
fa-balance-scale- \ f24e;
fa -ban- \ f05e;
fa -bank -\ f19c;
fa -barcode- \ f02a;
fa-battery-empty- \ f244;
fa-battery-half- \ f242;
fa-battery-quarter- \ f243;
fa-battery-three-quarters- \ f241;
fa-battery-full- \ f240;
fa -bed- \ f236;
fa -beer- \ f0fc;
fa -bell- \ f0f3;
fa-bell-slash- \ f1f6;
fa -binoculars - \ f1e5;
fa-birthday-cake- \ f1fd;
fa -bolt- \ f0e7;
fa -bomb- \ f1e2;
fa -book- \ f02d;
アイコンを回転またはフリップするには、fa-rotate-*およびfa-flip-*クラスを使用します。
4関連リソース
Font Awesomeコレクションに加えて、他のアイコンフォントも使用できます。
フォンテロ。fontello には、さまざまなアイコンフォントの大きなコレクションがあります。好きなアイコンを選択して、コンピューターにダウンロードできます。
基礎アイコン。Foundationアイコンは、基礎フレームワークの開発者からの別のアイコンフォントコレクションです。標準のアイコンに加えて、このサイトには丸いアイコン、ソーシャルメディアアイコンなどがあります。
マテリアルアイコン。マテリアルアイコンは、Googleの統一されたフラットアイコンであり、知覚の容易さを体現しています。アイコンは、すべての一般的なプラットフォームで美しいディスプレイとすべての画面解像度に最適化されています。
アイコンフォントコレクションには、750以上のアイコンが含まれています。 Webサイトにコレクションをインストールする最も簡単な方法は、Google Webフォントなどのアイコンを使用することです。これを行うには、次のコードがページマークアップに含まれています。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ブラウザにフォントを正しく表示するために、アイコンフォントを使用する要素には、マテリアルアイコンクラスが与えられます。
.material-Icons {font-family： 'Material Icons'; font-weight：通常のフォントスタイル：通常のフォントサイズ：24px; / *優先アイコンサイズ */ display：inline-block;幅：1EM;高さ：1EM; Line-Height：1;テキストトランスフォーム：なし;文字間隔：通常のワードラップ：通常。ホワイトスペース：nowrap;方向：LTR; -webkit-font-smoothing：antialiased; / *すべてのWebKitブラウザでサポートされています */テキストレンダリング：OptimizeLegibility; / * safari and chrome support */ -moz-osx-font-smoothing：grayscale; /* Firefoxサポート。 */ font-feature-settings： 'liga'; /* IEサポート。 */}アイコン自体がを使用して追加されます<I class=''material-アイコン''>アイコンの結晶またはHTMLコード</i> タグ、例：
<i class="material-アイコン">account_balance_wallet</i><i class="material-アイコン"></i>結晶は、すべての最新のブラウザー、つまりバージョン10から始まるすべての最新のブラウザーによって理解されます。アイコンコードは自動的に生成されます。これについては、アイコン画像を左クリックして、提案された外観をコピーする必要があります。
アイコンサイズ
アイコンサイズ is controlled by additional classes:
.material-アイコン.md-18 {font-size：18px;} /*<i class="material-アイコン md-18"></i> */.material-アイコン.md-24 {font-size：24px;} /*<i class="material-アイコン md-24"></i> */.material-アイコン.md-36 {font-size：36px;} /*<i class="material-アイコン md-36"></i> */.material-アイコン.md-48 {font-size：48px;} /*<i class="material-アイコン md-48"></i> */アイコンの色
アイコンの色は、追加のクラスを使用して設定されます。
.material-アイコン.md-dark {color：rgba（0、0、0、0.54）;} /*<i class="material-アイコン md-dark"></i> */.material-アイコン.md-light {color：rgba（255、255、255、1）;} /*<i class="material-アイコン md-light"></i> */.material-アイコン.md-dark.md-inactive {color：rgba（0、0、0、0.26）;} /*<i class="material-アイコン md-dark md-inactive"></i> * /.material-アイコン.md-light.md-inactive {color：rgba（255、255、255、0.3）;} /*<i class="material-アイコン md-light md-inactive">顔</i> */カスタムカラーを設定するには、例えば、アイコンの色を定義するクラスを追加する必要があります。
.material-アイコン.indigo {color：＃1a237e;} /*<i class="material-アイコン indigo"></i> */よくある質問
- 簡単な用語でFont Awesomeとは何ですか？
- 本質的に、それは任意のWebページ要素に追加されて、その可視性とデザインを強化できるアイコンを備えたフォントです。コレクションは、あらゆるタスクと目的に適した数百のアイコンで構成されています。このリンクに関する詳細情報
ミシェル・ピンソンは旅行愛好家であり、コンテンツの作成者です。教育と探検への情熱を融合させ、彼は知識を共有し、教育コンテンツを魅了することで他の人を鼓舞することにコミットしました。世界をグローバルな専門知識と放浪癖の感覚で力を与えることにより、世界をより近くに結び付けます。
