Foundation Icon Fonts 3を自動作成!アイコンを一覧表示し色とサイズ変更にも対応!

Foundation Icon Fonts 3を自動作成!アイコンを一覧表示し色とサイズ変更にも対応!アイキャッチ画像
Foundation Icon Fonts 3の自動作成ツールです。

アイコンを一覧から選択し、さらに色やサイズをカスタマイズ項目から選ぶことで、画面下にアイコンをプレビュー表示します。

プレビュー表示されたアイコンのコードも即座に表示するため、表示されたコードをご自身のサイトに貼り付けるだけでアイコンを簡単に使用できます。

 

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を初めて使用される方は、詳細な使い方は下記記事にまとめていますので、是非ご参考ください。
Foundation Icon Fonts 3 使い方 アイキャッチ画像

Foundation Icon Fonts 3の使い方と色やサイズの変更方法を解説!!

2018年3月12日

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コード




◆プレビュー表示◆



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です