SNSボタンをすぐに作れる！FontAwesome5を使用したCSSボタンメーカー

Tweet

Pocket

以下のような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ボタンジェネレーターの使用方法について解説しました。

新たにボタンを追加した場合はまたブロク記事を作成していきます。

リクエスト等あればコメント等いただけると幸いです。

最後まで読んでいただきありがとうございました。

Tweet

Pocket

Related posts:

ホバー時にアイコンが動く！様々な種類のCSSアニメーションを簡単に設定しよう bodyタグに複数の背景画像を設定し少し薄暗くする方法 WEBフォントをbase64にエンコードしSVG又はCSSに埋め込む方法 FontAwesomeを使用した影付きCSSアイコンボタンを作れる！ イラストレーターで斜めストライプ文字を作ってみた サイトやブログをダークモードに対応させよう Googleフォント「Anton」を使用しCSSでパッチ風のデザインにする方法 CSSで中抜き文字をずらしてみた 上下に斜めストライプを入れたCSSデザイン CSSの「mix-blend-mode」で画像と文字をブレンドさせてみた