Bootstrap4.0でナビのハンバーガーメニューを画像に変えたい

前提・実現したいこと

Bootstrap4.0でナビを作っており、ハンバーガメニューではなく画像で、メニューを折りたたみたいのですが、やり方がわかりません。
目標としてはちなみに、以下のリンクにあるようなナビゲーションバーを作ろうと考えています。
https://www.airbnb.jp/gift

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
11    <link rel="stylesheet" type="text/css" href="main.css">
12
13    <title>Test</title>
14  </head>
15  <body>
16
17    <!-- header -->
18    <header>
19      <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
20        <a href="#" class="navbar-brand">Navbar</a>
21        <button class="navbar-toggler" type=button data-toggle="collapse" data-target="#" aria-controls="#" aria-expanded="false" aria-label="Toggle navigation">
22          <span class="navbar-toggler-icon"></span>
23        </button>
24      </nav>
25
26    <!-- Optional JavaScript -->
27    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
28    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
29    <Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
30    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
31  </body>
32</html>

CSS
1.navbar-toggler{
2  background-color: #000000;
3  background-image: url("...")
4}
5
6
7.navbar-toggler.navbar-toggler-icon {
8  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
9}

試したこと

navbar-togglerとnavbar-toggler-iconのそれぞれのbackground-imageを変えてもハンバーガーメニューが所望の画像になることはありませんでした。自分は初心者なので、はい大変恐縮なのですが、どうかお願いいたします

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

ちなみに、以下のリンクにあるようなナビゲーションバーを作ろうと考えています。
https://www.airbnb.jp/gift

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

回答1件

ベストアンサー

<span class="navbar-toggler-icon"></span>
をそのまま
<img src="画像URL">に変更すれば良いと思います。
※念のため、リファレンスのHTMLで補完して確認しました。

html
1    <header>
2      <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
3        <a href="#" class="navbar-brand">Navbar</a>
4        <button class="navbar-toggler" type=button data-toggle="collapse" data-target="#testnav" aria-controls="testnav" aria-expanded="false" aria-label="Toggle navigation">
5          <img src="hogehoge.jpg">
6        </button>
7         <div class="collapse navbar-collapse" id="testnav">
8            <ul class="navbar-nav">
9                <li class="nav-item active">
10                    <a class="nav-link" href="#">新規登録</a>
11                </li>
12                <li class="nav-item">
13                    <a class="nav-link" href="#">データ一覧</a>
14                </li>
15                <li class="nav-item">
16                    <a class="nav-link" href="#">エクスポート</a>
17                </li>
18            </ul>
19        </div>
20      </nav>
21      </header>

投稿2019/03/12 04:12

編集2019/03/12 04:18

m.ts10806

総合スコア80842

ironman

2019/03/12 04:20

なりました！ありがとうございます。navbar-toggler-iconは結局ここではハンバーガーメニューを出してくれるクラスという認識でいいのでしょうか？

ironman

2019/03/12 04:23

こんなにあっさりできるとは...

m.ts10806

2019/03/12 04:25

解決されたようで何よりです。 > ハンバーガーメニューを出してくれるクラスという認識でいいのでしょうか？どのような作りになっているかは私が説明するよりブラウザ開発ツールから <span class="navbar-toggler-icon"></span>　にフォーカスあてて構造を確認されたほうが理解が深まると思います。（それかbootstrap本体のコードを読むか）

ironman

2019/03/12 04:29

ありがとうございました！かなりの時間試行錯誤していたので、助かりました。質問してよかったです。わかりました。やってみます。

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