アイコンを一覧から選択し、さらに色やサイズをカスタマイズ項目から選ぶことで、画面下にアイコンをプレビュー表示します。
プレビュー表示されたアイコンのコードも即座に表示するため、表示されたコードをご自身のサイトに貼り付けるだけでアイコンを簡単に使用できます。
Foundation Icon Fonts 3自動作成ツールの使い方
- head要素内に下記のコードを入れて下さい。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"> - Foundation Icon Fontsアイコン一覧からアイコンを選択してください。
- Foundation Icon Fontsカスタマイズから色、サイズを選択してください。
- 画面下のプレビューを確認し、問題がなければHTMLコードをご自身のサイトに貼り付けてください。
HTMLコードは画面左下の下記ボタンからもコピーできます。
Foundation Icon Fontsアイコン一覧
General Icons
Page Icons
Arrow Icons
People Icons
Device Icons
Text Editor Icons
Media Control Icons
Ecommerce Icons
Accessibility Icons
Social & Brand Icons
Miscellaneous Icons
Foundation Icon Fontsカスタマイズ
| カスタマイズ項目 | カスタマイズ明細 |
|---|---|
| 色 | |
| サイズ |
HTMLコード
コメントを残す