以下のようなFontawesome5のアイコンを設定できるCSSボタンジェネレーターを作成しました。
アイコンやカラー、ボタンのサイズや角丸の大きさを簡単に変更できます。
以下で使い方を詳しく解説していきます。
使い方
上記はアイコンボタン設定ページ全体のイメージ画像です。
アイコンを選択する
検索窓に設定したアイコンのキーワードを入力して設定するアイコンを絞り込みます。日本語検索も可能です。
ここでは「電卓」と入力し、電卓のアイコンを選択します。
ボタンに「電卓」アイコンが設定されます。
アイコンカラー、ボタン背景、ボタンのサイズを設定する
プルダウン、スライダーを調整してアイコンカラー、背景、ボタンのサイズを変更します。
以下のようにカラーとサイズが変更されます。
HTML・CSSを編集する
「HTML・CSS」のタブをクリックするとFontawesome5のCDN、アイコンボタンの「HTML」「CSS」が表示されます。
HTML、CSSは編集可能です。以下の例ではHTMLを直接編集し、プレビュー表示します。CDNについては編集不可です。
↓
iタグclassの「fa-calculator」を「fa-rss」に直接変更しプレビュー表示すると以下のような「RSS」アイコンが表示されます。
HTML・CSSをコピーする
プレビューで表示されているボタンを確認後、上記赤枠の「選択する」ボタンをクリックしてHTMLとCSSをコピーしてください。その後Wordpressや無料ブログ、WEBサイト等に貼り付けてご使用ください。
以上、CSSボタンジェネレーターの使用方法について解説しました。
新たにボタンを追加した場合はまたブロク記事を作成していきます。
リクエスト等あればコメント等いただけると幸いです。
最後まで読んでいただきありがとうございました。
コメントを残す