ヘッダーの虫眼鏡アイコン（検索ボタン）の横にタイトルを表示（WordPress + SWELL）

SWELLのスマホ用ヘッダーのボタンにはアイコンの下や横にラベルを表示する機能が標準で備わっていますが、PCのヘッダーメニュー内にある虫眼鏡アイコン（検索ボタン）の横にテキストを直接表示（例えば「 検索・タグ一覧」）する標準設定が見つからなかったのでCSSでカスタマイズした際の作業メモです。

虫眼鏡アイコン（検索ボタン）の横にテキストを直接表示するCSS

ChromeブラウザでPC用グローバルナビゲーション内にある「検索ボタン（虫眼鏡アイコン）」を右クリックしてプルダウンメニュー「検証」を押して開く検証画面（デベロッパーツール）の薄い青色の背景行のclassc-gnav__sBtnは、PC用グローバルナビゲーション内に表示される「検索ボタン（虫眼鏡アイコン）」に付与されているクラス名でした。

コード作成時のWordPress、SWELL、PHPのバージョンです。

• WordPress6.9.4
• SWELL2.16.0
• PHP8.3.30

以下のコードを管理者メニューの 「外観」 > 「カスタマイズ」 > 「追加CSS」の一番上に貼り付けました。

動作確認はFirefox（149.0.2 64ビット）と Edge、Chrome、Brave（ともにChromiumベース（バージョン 146.0.7680.178 公式ビルド 64ビット）で行っています。挙動が異なる箇所があったので「!important」を付けて検証していますが環境によっては不要と思います。

.c-gnav__sBtn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    flex-direction: row !important;
}

.c-gnav__sBtn::after {
    content: "検索・タグ一覧" !important;
    font-size: 14px !important;
    margin-left: 6px !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

.c-gnav__sBtn i {
    font-size: 16px !important;
}

PCブラウザ（Firefox、Edge、Chrome、Brave）で表示を確認

PC用グローバルナビゲーションの虫眼鏡アイコン（検索ボタン）の横に「検索・タグ一覧」の文字が表示されていることを確認できました。