font-awesome チュートリアル
font-awesomeを使い始める

備考

セットアップ

FontAwesomeをWebサイトに統合するには、さまざまな方法があります。

普通のHTML / CSSの場合：

• ここで入手可能なzipをダウンロードし、解凍して内容をあなたのウェブサイトにコピーしてください。次に、ウェブページのhead /css/font-awesome.cssを参照してください。
  
  <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
• CDNアドレスを使用してウェブページのheadそれを参照してください。そのようなアドレスの1つはhttps://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.cssです。これを参照するには、 linkタグを使用しますが、代わりにソースをCDNアドレスに設定してlink

パッケージマネージャーの場合：

ほとんどのパッケージマネージャーは、フォントAwesomeをパッケージとしてサポートしています。以下にいくつかの例を示します。

• NuGet： Font-Awesome検索してインストールするか、パッケージコンソールで以下のコマンドを実行してください： Install-Package FontAwesome
• Ruby：このコマンドを実行するだけgem install font-awesome-rails ： gem install font-awesome-rails
• npm：このコマンドを実行するだけnpm install font-awesome ： npm install font-awesome

基本的な例：アイコンを使用する

単純な使用事例は、通常のサイズの単一のアイコンを参照することです： <i class="fa fa-camera-retro"></i> （結果をこのフィドルで見る）

空のタグを作成します（これには<i>を使用することをお勧めします）。クラス " fa "と目的のアイコンに対応するクラスを割り当てます（ ここのアイコンのリストを参照）。

Font Awesomeを使う

Font Awesomeは非常にシンプルでありながら強力なライブラリであり、634個のアイコンが数語で利用できます。

どのように機能するのですか？フォントAwesomeは../fontsディレクトリに格納されているUnicode文字を使用して、アイコンをテキストとして表示するので、 i.fa要素をそれぞれのUnicode文字に変更します。

アイコンを作成するにはどうすればいいですか？主にベストプラクティスのために、すべてのアイコンクラスをi要素またはitalic elementにする必要がありますが、Font Awesomeでパフォーマンスを向上させることもできます。すべてのアイコンにはクラスfaもあります。これはアイコンを示し、アイコンなしでは動作しません 。その後、別のfa-プレフィックスされたアイコンを追加してください。完成した例は次のとおりです。

<i class="fa fa-pencil"></i>なります

フォントはすばらしくユニコード文字から機能するので、フォントfont-size 、 colorなどのテキスト操作も同様に適用できます。