在 Bootstrap 4 WordPress 主题中使用 X（关闭）作为导航栏切换器图标？

Question

我正在尝试将切换器（汉堡）图标变成 X。 我关注了另一个线程How to hide and replace navbar-toggler-icon in Bootstrap 4?，还使用了Codeply中的代码 我仍然无法更改图标。我认为其他地方出了点问题。

这是我的导航代码：

<div class="container">
            <nav class="navbar navbar-toggleable-md navbar-light">

                <div class="navbar-brand">
                    <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo esc_attr(get_theme_mod( 'wp_bootstrap_starter_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>
					<button class="navbar-toggler navbar-toggler-center collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="my-1 mx-2 close">X</span>
					<span class="navbar-toggler-icon"></span>
					</button>
                </div>
                <?php
                wp_nav_menu(array(
                    'theme_location'    => 'primary',
                    'container'       => 'div',
                    'container_id'    => '',
                    'container_class' => 'collapse navbar-collapse justify-content-end',
                    'menu_id'         => false,
                    'menu_class'      => 'navbar-nav',
                    'depth'           => 3,
                    'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                    'walker'          => new wp_bootstrap_navwalker()
                ));
                ?>

            </nav>
        </div>

这是我的 CSS：

@media screen and (min-width: 200px) and (max-width: 998px){

    .navbar-toggler {
        display: block;
		width: 100%;
		float: none;
		margin-right: 0;	
    }/*
    .navbar-collapse.collapse {
        display: none !important;
    }*/
    .navbar-header {float: none; text-align:center;}
    nav.navbar-collapse.navbar-right.collapse.in {
        display: block !important;
    }
    nav.navbar-collapse.navbar-right.collapse,
    nav.navbar-collapse.navbar-right.collapse ul,
    nav.navbar-collapse.navbar-right.collapse li,
    nav.navbar-collapse.navbar-right.collapsing,
    nav.navbar-collapse.navbar-right.collapsing ul,
    nav.navbar-collapse.navbar-right.collapsing li {
        width: 100%;
    }
	.navbar-toggler>.close {display:inline;}
	.navbar-toggler.collapsed>.close, 
	.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {display:none;}
	.navbar-brand {margin:0 auto;}
	
	#content .container {margin: 170px auto 0;}
}

我对 html、css 或 php 并不陌生，但我对 BootStrap 比较陌生。 您会注意到 navbar-collapse 已被注释掉，这是因为它会立即关闭导航。这本身就是一个问题。这是使用 BootStrap 和 UnderScores 的 wp-bootstrap-starter 主题的子 WordPress 主题。任何帮助将不胜感激！

Answer 1

是CSS，应该是：

.navbar-toggler>.close {
    display: inline;
}
.navbar-toggler.collapsed>.close, 
.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display: none;
}