モバイルヘッダーにアイコンを追加したい

前提

モバイルヘッダーにイメージ画像のように、Twitterのアイコンと、ペンのアイコンを追加したいと考えているのですが、cssの追加で可能でしょうか？

実現したいこと

・Twitterのアイコン(<i class="fab fa-twitter"></i>) をハンバーガーメニューの横に追加したい

・ペンのアイコン(<i class="fas fa-edit"></i>)を検索マークの横に追加したい

・それぞれのアイコンのカラーを#B0C4DEにして、指定したurlを紐付けたい。
Twitterは(https://twitter.com/bright_web_jp)
ペンマークには(https://gift-box.bright-web.jp/new-thread/)

発生している問題・エラーメッセージ

なし

エラーメッセージ
なし

該当のソースコード

なし

補足情報（FW/ツールのバージョンなど）

ワードプレス　最新バージョン
テーマ: cocoon
サイトURL https://gift-box.bright-web.jp

ちなみに現在ある
ハンバーガーメニューと検索アイコンの部分は過去に追加したcssですでにカスタマイズ済みでそのように表示されております。

ここにより詳細な情報を記載してください。
CSSを追加したいと思っています。
ご教示よろしくお願いします。

nekokotk

2022/12/23 05:37

具体的に必要な情報など他にありましたらご教示ください。🙇‍♂️

行動規範の内容に同意します

回答1件

ベストアンサー

CSS だけでは不可能です。

HTML の記述が必要になりますが、お使いのテーマのカスタマイズ状況が分からないのでテンプレートファイルの編集方法をお伝えすることができません。

JavaScript で HTML を挿入するコードを以下に示します。

cocoon-child-master/tmp-user/main-before.php を編集して以下の記述を追加してみてください。

html
1<style>
2#container .mobile-header-menu-buttons {
3  justify-content: space-between;
4  align-items: center;
5  padding: 0 25px;
6}
7#container .menu-button {
8  flex: 0 0 auto;
9  width: auto;
10  min-width: auto;
11  margin: 0;
12}
13.twitter-menu-button {
14  right: 10px;
15}
16.new-thread-menu-button {
17  left: 10px;
18}
19.twitter-menu-button i,
20.new-thread-menu-button i {
21  color: #B0C4DE;
22}
23</style>
24<script>
25window.addEventListener('DOMContentLoaded', function() {
26  const logo = document.querySelector('.mobile-header-menu-buttons .logo-menu-button');
27  function createLi(clsKey, url, icon) {
28    const li = document.createElement('li');
29    const a = document.createElement('a');
30    const i = document.createElement('i');
31    li.className = `${clsKey}-menu-button menu-button`;
32    a.href = url;
33    i.className = icon;
34    a.append(i);
35    li.append(a);
36    return li;
37  }
38  const twitter = createLi('twitter', 'https://twitter.com/bright_web_jp', 'fab fa-twitter');
39  const newThread = createLi('new-thread', '/new-thread/', 'fas fa-edit');
40  logo.insertAdjacentElement('beforebegin', twitter);
41  logo.insertAdjacentElement('afterend', newThread);
42});
43</script>