Latest web development tutorials

財団アイコン

財団は283アイコンを提供し、あなたは、CSSを使用して、そのスタイルのサイズを定義することができます。

アイコンように、テキスト、ボタン、ツールバー、メニュー、フォームのために使用することができます。

アイコン財団の例を以下に示します。

更新ボタン：

検出アイコン：

ホームアイコン：

構文のアイコン

次のように作成したアイコンの構文は次のとおりです。 

<i class="fi-name"></i>

名前のアイコン名の部分を交換してください。

私たちは、アイコンのスタイルファイルを追加するには、<head>セクションが必要なアイコンを使用するには： 

<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">

アイコンの例

次の例では、アイコンの使用方法を示します。

例

<P>クラウドアイコン：<Iクラス= "FI-クラウド"> </ I> </ P>
<P>リンクとしてクラウドのアイコン ：
<AのHREF = "#"> <Iクラス= "FI-クラウド"> </ I> </ A>
</ P>
<P>スタイル付きクラウドアイコン：<私のクラス= "FI-クラウド"スタイル= "フォントサイズ：35px;色：赤;"> </ I> </ P>
<P>ホームアイコン：<私のクラス= "FI-ホーム"> </ I> </ P>
ボタン上の<P>ホームアイコン ：
<ボタンタイプ= "ボタン"クラス = "ボタン">
<Iクラス= "FI-ホーム "> </ i>のホーム
</ボタン>
</ P>
グリーン上の<P>ホームアイコンボタン：
<ボタンタイプ= "ボタン"クラス = "ボタンの成功">
<Iクラス= "FI-ホーム "> </ i>のホーム
</ボタン>
</ P>
大型の<P>ホームアイコン 、ライトブルーリンクボタン：
<AのHREF = "#"クラス = "button情報large">
<Iクラス= "FI-ホーム "> </ i>のホーム
</ A>
</ P>

»をお試しください

ツールバーのアイコン

我々は、使用することができます.icon-barツールバーアイコンの数を指定して作成するクラス：

例

<DIV CLASS = "アイコンバー 5アップ」>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-ホーム "> </ I>
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-ブックマーク "> </ I>
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-情報 "> </ I>
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-メール "> </ I>
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-様 "> </ I>
</ A>
</ DIV>

»をお試しください

アイコン説明を使用し<label>要素：

例

<DIV CLASS = "アイコンバー 5アップ」>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-ホーム "> </ I>
<ラベル>ホーム</ label>は
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-シェア "> </ I>
<ラベル>共有</ label>は
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-情報 "> </ I>
<ラベル>情報</ label>は
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-メール "> </ I>
<ラベル>メール</ label>は
</ A>
<AのHREF = "#"クラス = "item">
<Iクラス= "FI-拡大 -ガラス"> </ I>
<ラベル>検索</ label>は
</ A>
</ DIV>
»をお試しください

.disabledクラスにはなってクリックできないアイコンのステータスをすることができます：

例

<AのHREF = "#"クラス = "item disabled">
<Iクラス= "FI-シェア "> </ I>
</ A>

<AのHREF = "#"クラス = "item disabled">
<Iクラス= "FI-メール "> </ I>
</ A>

»をお試しください

.verticalクラスは垂直ツールバーを作成するために使用されます。

例

<DIVクラス= "アイコンバー縦5アップ">
....
</ DIV>

»をお試しください

財団アイコンリファレンスマニュアル

アイコンの内容についての詳細は、私たちを参照することができ財団アイコンマニュアル。