[ 解決済 ] ボタンのアイコンのみ右端に寄せたい

このトピックには2件の返信、2人の参加者があり、最後にs hにより9ヶ月、 3週前に更新されました。

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

投稿者

投稿
2024年1月19日 5:04 PM #83908

s h
参加者

■ WordPress のバージョン
6.4.2

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

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

■ テーマのバージョン
15.17.1

■ Pro Unit のバージョン
0.26.4

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.4

■ 期待する動作
ボタンのアイコンのみを右端に設定したいです。
文字は中央揃えです。

■ 自分で試した事
過去フォーラムやパターンライブラリで探しましたが見つかりませんでした。

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

■ 実際の症状
アイコンが文字と共に中央揃えになってしまいます。

2024年1月22日 10:20 AM #84020
うなこ
モデレーター
ボタンのアイコンのみを右端に設定したいです。
文字は中央揃えです。

VKボタンの機能としてはありませんので、CSSでのカスタマイズになります。

カスタマイズ→追加CSSや子テーマでしたら子テーマのcssファイルに以下のCSSを追加してください。アイコンがボタンの端によるとおもいますがいかがでしょうか？（1.5rem;の数値はお好みで変えてください）
```
.vk_button_link:not(.vk_button_link-type-text) {
position:relative;
}
.vk_button_link:not(.vk_button_link-type-text) .vk_button_link_before,
.vk_button_link:not(.vk_button_link-type-text) .vk_button_link_after{
position:absolute;
}
.vk_button_link:not(.vk_button_link-type-text) .vk_button_link_before{
left:1.5rem;
}
.vk_button_link:not(.vk_button_link-type-text) .vk_button_link_after{
right:1.5rem;
}
```
2024年1月30日 5:46 PM #84355

s h
参加者

うなこ様

こちらのCSSで解決いたしました。
的確なご回答、ありがとうございました。
大変助かりました。
投稿者

投稿