Font Awesome のアイコンを使える Lightning や VK Blocks などを使用している WordPress サイトで、任意の Font Awesome のアイコンを段落の前や後につけるやり方を紹介します。
① 横並びブロックを使う
横並びブロックに VK Blocks のアイコンブロックと段落を入れて、左揃え・垂直位置を中央揃えにします。
作成例
段落の前に PDF のアイコンを置いた例
段落の後に Excel のアイコンを置いた例
ご注文はカートのアイコンをクリック!!
ただいまオンラインショップでキャンペーン中です。
このやり方のメリット・デメリット
- アイコンの色と大きさをかんたんに変更できる。
- アイコンを前・後どちらにも置くことができる。段落を追加すれば、途中に置くこともできる。
- ブロックの構成を理解して編集作業を行う必要がある。→ 操作ミスでレイアウトがおかしくなる可能性がある。
② CSS で独自にカスタマイズする
以下の CSS を書く。
p:is(.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas) {
display: flex;
text-align: inherit;
width: inherit;
font-weight: inherit;
align-items: center;
}
p:is(.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas)::before {
color: var(--vk-color-primary);
font-weight: 900;
font-size: 1.75em;
width: var(--fa-width,1.25em);
}段落ブロックの [高度な設定] → [追加 CSS クラス] に fa-solid fa-file-pdf のようにアイコンのクラス名を指定する。
作成例
段落の前に PDF のアイコンを置いた例
段落の前に Excel のアイコンを置いた例
このやり方のメリット・デメリット
- 単一の段落ブロックをカスタマイズしているので、操作ミスでレイアウトがおかしくなる可能性が低い。
段落の前にアイコンを置くだけでよい場合はこのやり方が適している。
- アイコンを置ける場所は段落の前だけ。
- Font Awesome 7 になって CSS の仕様が大きく変わっているため、Font Awesome 7 を使っているサイトではエディターにもこの CSS を適用する必要がある。そうしないとエディター画面がくずれてしまい、すご～く編集しづらい（≒ 編集できない）。
③ VK Blocks のボタンブロックを使う
記事のタイトル「段落の前や後に...」と矛盾しますが、段落を使わずに VK Blocks のボタンブロックで作るやり方もあります。
ボタンスタイルを テキストのみ にすれば、段落と同じ見え方になります。
段落の前や後にアイコンをつけるとき、リンクを設定するケースが多いと思いますが、そういうケースでは VK Blocks のボタンブロックが最適かもしれません。
作成例
このやり方のメリット・デメリット
- 単一のボタンブロックなので、操作ミスでレイアウトがおかしくなる可能性が低い。
- アイコンを前後のどちらでも（両方にも）置くこともできる。
- アイコンの大きさをかんたんに変更できる。
- アイコンとテキストの色をかんたんに変更できる。（下記の注意事項あり）
- アイコンとテキストの色を別々に設定できない。
- リンクが要らないケースには使えない。
【参考】弊社オリジナルプラグイン UJS Add Icon
特記事項
プラグイン UJS Add Icon は、弊社（魚沼情報サービス）がウェブサイトを受託制作する際に、制作費用を抑えて、短期間でお客様に納品し、メンテナンス性の向上を図る目的で使用しているもので、公開しているプラグインではありません。
作成例
サイト制作依頼をいただいたお客様から、こんなかんじ ↑ に段落内やテーブル内など、任意のブロック内の任意の文字列の後ろにアイコンを表示できるようにしたい、というご要望をいただき、オリジナルのプラグイン UJS Add Icon を制作させていただきました。
このプラグインによる操作画面はこちら ↓ です。
文字列を選択して、ツールバーからアイコンを選ぶだけのかんたん操作になっています。
このやり方のメリット・デメリット
- 任意のブロック内の任意の文字列の後ろにアイコンを置くことができる。
- 操作がかんたん
- 選べるアイコンは4つだけ。
いまのところ、この4つで足りていますし、お客様からのご要望があれば追加を検討します。
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
メールでのお問い合わせはこちら
