[ 質問者返信待ち ] VKボタンでアイコン ( Font Awesome )のサイズ変更が出来ません。

タグ: アイコン ( Font Awesome ) サイズ変更

このトピックには1件の返信、2人の参加者があり、最後にうなこにより3年前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿
2021年11月9日 6:23 AM #58221

With
参加者

■ WordPress のバージョン
5.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.11.12

■ Pro Unit のバージョン
0.12.2

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
Wordpress 5.8.1
Lightningバージョン: 14.11.12
Lightning G3 Pro Unit　バージョン 0.12.2
VK Blocks Pro　バージョン 1.18.6
VK All in One Expansion Unit　バージョン 9.68.4.0

■ 期待する動作
VKボタンでアイコン ( Font Awesome )のサイズ変更が出来ません。

　通常サイズで表示

↓


アイコンのサイズを大きくしたい。
こちらに設定するとアイコン非表示になります。

検証をお願いします。

■ 自分で試した事
アイコンの大きさを変更する（参考ページ）

アイコンフォントで簡単装飾

　通常サイズで表示

↓

　アイコン非表示

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
　通常サイズで表示

↓


アイコンのサイズを大きくしたい。
こちらに設定するとアイコン非表示になります。

2021年11月9日 11:09 AM #58237
うなこ
モデレーター
VKボタンブロックのブロックからではなく「HTMLとして編集」をして、iタグにクラス名を追加すると大きさが変更できますが、HTMLに変換されてしまいますので少々使いずらいのではないかと思いました。
(添付いただいた参考ページは、まだブロックではない頃の記事になりますので、現在は「HTMLとして編集」に変換して使用するイメージになります)

提案なのですが、VKボタンにクラス名を付与して、cssで大きさを変更する方法はいかがでしょうか。
自分でクラス名とCSSを追記しなくてはいけなくなりますが、ブロックのままなので扱いやすいのではないかと思います。

やり方は次の手順です。
【01】VKボタンブロックを選択して右側にあるブロックの設定画面の「高度な設定」の「追加 CSS クラス」に、クラス名を追加する。
例えばvk_button_iconsize_fa-3x　にするとします。

【02】子テーマのcssか、もしくはカスタマイズの追加CSSなどに以下を追加する。
```
.vk_button_iconsize_fa-3x i{
font-size: 3em;
}
```
クラス名やfont-size は好きなものに変更して試してみてください。
いかがでしょうか？
- この返信は3年前にうなこが編集しました。
- この返信は3年前にうなこが編集しました。
投稿者

投稿