VKボタンでアイコン ( Font Awesome )のサイズ変更が出来ません。

VWSとは フォーラム Lightning VKボタンでアイコン ( Font Awesome )のサイズ変更が出来ません。

VKボタンでアイコン ( Font Awesome )のサイズ変更が出来ません。

  • このトピックには1件の返信、2人の参加者があり、最後にうなこにより3週、 6日前に更新されました。
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • 投稿者
    投稿
  • #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 )のサイズ変更が出来ません。

    <i class=”fab fa-youtube”></i> 通常サイズで表示

    <i class=”fab fa-youtube fa-3x”></i>
    アイコンのサイズを大きくしたい。
    こちらに設定するとアイコン非表示になります。

    検証をお願いします。

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

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

    <i class=”fab fa-youtube “></i> 通常サイズで表示

    <i class=”fab fa-youtube fa-3x”></i> アイコン非表示

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

    ■ 実際の症状
    <i class=”fab fa-youtube”></i> 通常サイズで表示

    <i class=”fab fa-youtube fa-3x”></i>
    アイコンのサイズを大きくしたい。
    こちらに設定するとアイコン非表示になります。

    #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週、 6日前にうなこが編集しました。
    • この返信は3週、 6日前にうなこが編集しました。
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。