ハンバーガーメニューを「メニュー」とカタカナ書きに変えたい

[GO参加者]

スマホなど画面が狭いところでは、グランド(ナビ)メニューが「三」のハンバーガーアイコンで表示されます。
ところが、どうもこれがメニューボタンだ、と気付いてもらえないことが少なくないことが分かりました。

「三」の代わりに「メニュー」とカタカナ書きにしたいのですが、これは下記のように Font Awesome Icon を使っているようです。

<a id="menuBtn" class="btn btn-default menuBtn menuClose menuBtn_left" href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>

header.php のここを強引に「メニュー」に変えてみたのですが、どうも上手く動きません。
四角い枠の中に「メニュー」と表示されるのですが、それを選択してメニュー画面が表示されたとき、「×」ボタンに変わりません。

あと、どこをいじったら良いのでしょうか。
どなたかお分かりになる方、いらっしゃいますか？

[なでこモデレーター]

こんにちは！CSSから修正できそうです。

VK ExUnit → CSSカスタマイズに以下のCSSを追加してみてください。
（もしくは、外観→カスタマイズ→追加CSS）

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
content: “メニュー”;
}

[GO参加者]

なでこ様

コメントをありがとうございました。
残念ながら、教えて頂いた CSS カスタマイズでは修正できませんでした。
念のため!importantも入れてみたのですが、ダメでした。

基本的に php はいじっていないので、タグの名称その他は変わっていないはずなのですが。

[なでこモデレーター]

ダメでしたか…　うーん…なぜでしょう…(+_+)　cssを追加した後は、ナビメニューの「三」の文字はどうなりますか？？

[GO参加者]

全くなにも変わりませんでした。
css の追加を記載したことが、なにも反映されていない挙動でした。

[なでこモデレーター]

あ、原因が分かりました。すみません…！
以下のCSSを追加して下さい。

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
content: "メニュー";
}

原因は「メニュー」を囲うダブルクォーテーションマークが全角になっておりました。
(codeで囲わないと、送信したときに全角に変換されてしまうんですね…無知でした汗)
半角にしていただければ直ると思います。

• この返信は1 年、 10 ヶ月前に  なでこ さんが編集しました。
• この返信は1 年、 10 ヶ月前に  なでこ さんが編集しました。

[GO参加者]

できました、できました！！
ありがとうございます。感動的に修正されました。

マウスを乗せたときのロールオーバーもきちんと反応しています。
css の修正ではダメだと思っていました。

本当にありがとうございました。

[yuanmaroliunei参加者]

ここに書いて良いかわからないのですが、同じことをしたいので、ここに書いてみます。
自分は
WordPress 4.9.6
バージョン: 4.4.3
ハンバーガーメニューがそもそも三になっていません。
上記CSSを書き加えても何も変化は見られません。
ただの□（四角い箱）が表示されています。

どなたか、よろしくお願いいたします。

[yuanmaroliunei参加者]

追記：
サイト内のほとんどの「Font Awesome」のアイコンが表示されません。
管理画面内の「外観」の「カスタマイズ」で見るときちんと表示されていますが、通常の表示では表示されません。
何か触ってはいけないことろを触ったのでしょうか？
よろしくお願いいたします。

[GO参加者]

「Font Awesome」が表示されないのは、Lightning の最新バージョンで改善されていると思います。
書き込みを拝見して、僕もサイトのアイコンが消えていてびっくりしました。

Lightning を最新版に更新してどうなるか、教えて頂けますか？

[sumapan参加者]

お世話になっています。

私もハンバーガーメニューをメニューの文字に変更したく、
こちらのなでこ様記述のものを子テーマの追加CSSに書き込んだのですが、
変わらず、なにか原因はありますでしょうか？

WordPress 4.9.6
Lightningバージョン: 4.4.12です。

よろしくお願いいたします。

[sumapan参加者]

追記ですが、プラグインはlightning paleを使用しております。

[じょに次郎モデレーター]

.siteHeader {
	min-height: 56px;
}
.vk-mobile-nav-menu-btn{
	text-indent: inherit !important;
	height:42px !important;
	width:40px !important;
	background-position: top 2px left 6px !important;
	padding-top:24px;
	font-size:10px;
	line-height: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	text-align: center;
}
.vk-mobile-nav-menu-btn.menu-open {
	background-position: top -4px left 0px !important;
	background-size: 12px 12px;
}

でそれっぽくはいけますが、上記の記述ではなくて、
MENUの文字の入った画像（SVG推奨）を作って
.vk-mobile-nav-menu-btn と .vk-mobile-nav-menu-btn.menu-open の背景指定するだけの方が表示は安定すると思います。

• この返信は1 年、 3 ヶ月前に  じょに次郎 さんが編集しました。

[古河参加者]

こんにちは。
BizVektor ですが、上記を試しても、「メニュー」に変わりません。
Lightning だけなのでしょうか？

[投稿者]

投稿