问为什么我在bootstrap中看不到humberger图标？
EN

Stack Overflow用户

提问于 2020-11-13 07:29:55

回答 1查看 65关注 0票数 0

问题是，当我的导航栏折叠时，humberger图标会消失，但仍然可以工作。actual image of humberger icon

这是我尝试过的解决方案，但sill不起作用。

.custom-toggler .navbar-toggler-icon {
  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,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

.techfont{
  font-family: 'Russo One', sans-serif;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.postdate{
  text-align: center;
}

.custom-toggler .navbar-toggler-icon {
  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,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

.posttitle{
  font-family: 'Russo One', sans-serif;
  font-size: 3em;
  text-align: center;
}

.postcontent{
  font-family: 'Montserrat';
  font-size: 1.5em;
}

.centerstage{
  margin-left: auto;
  margin-right: auto;
}

.btn-comment{
  position: absolute;
  right: 0px;
}

.bigbrand{
  font-size: 1.5em;
}

/*COLOR CHANGER*/
/*Credit and Source: http://codepen.io/thapliyalshivam/pen/dvgXVO*/
.loader{
  filter:hue-rotate(0deg);
  color: linear-gradient(45deg,#0f8,#08f);
  animation:hue 5000ms infinite linear;
}

@keyframes spinify {
  0% {
    transform: translate(0px,0px);

  }
  33% {
    transform: translate(0px,24px);
    border-radius:100%;
    width:10px;
    height:10px;

  }
   66% {
    transform:translate(0px,-16px);
  }

   88% {
    transform:translate(0px,4px);

  }
  100% {
    transform:translate(0px,0px);
  }
}
@keyframes hue{
  0%{filter: hue-rotate(0deg);}
  100%{filter:hue-rotate(360deg);}

}

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <title>KBLOG</title>

    <!-- Latest compiled and manified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Alternative to Bootstrap 4 font_awesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- MEDIUM STYLE EDITOR -->
    <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">

    <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">

</head>

<body class="loader">

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-custom bg-light techfont">
        <div class="container">
            <a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Tech Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'about' %}">About</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="https://www.github.com">Github</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="https://www.linkedin.com">LinkedIn</a>
                    </li>
                    <li class="nav-item active">
                        {% if user.is_superuser %}
                        <a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
                        {% endif %}
                    </li>
                </ul>
            </div>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'post_new' %}">New Post</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'post_draft_list' %}">Drafts</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                    </li>
                    <li>
                        <a>Welcome: {{ user.username }}</a>
                    </li>
                    {% else %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'register' %}">Register</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-item nav-link" href="{% url 'user_login' %}" aria-label="Login"><span class="fa fa-user" aria-hidden="true"></span></a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- The actual blog posts -->
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <div class="blog_posts">
                        {% block body_block %}
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

html

css

回答 1

Stack Overflow用户

发布于 2020-11-15 10:13:13

顺便说一句，我用我的网站存储了svg，我希望这对你有用

.techfont{
font-family: 'Russo One', sans-serif;
font-size: 1.5em;
margin-bottom: 10px;
}

.postdate{
text-align: center;
}

.custom-toggler .navbar-toggler-icon {
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,102,203, 0.5)' stroke-width='2' stroke-linecap='round'
stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
border-color: rgb(255,102,203);
}

.posttitle{
font-family: 'Russo One', sans-serif;
font-size: 3em;
text-align: center;
}

.postcontent{
font-family: 'Montserrat';
font-size: 1.5em;
}

.centerstage{
margin-left: auto;
margin-right: auto;
}

.btn-comment{
position: absolute;
right: 0px;
}

.bigbrand{
font-size: 1.5em;
}

/*COLOR CHANGER*/
/*Credit and Source: http://codepen.io/thapliyalshivam/pen/dvgXVO*/
.loader{
filter:hue-rotate(0deg);
color: linear-gradient(45deg,#0f8,#08f);
animation:hue 5000ms infinite linear;
}

@keyframes spinify {
0% {
transform: translate(0px,0px);

}
33% {
transform: translate(0px,24px);
border-radius:100%;
width:10px;
height:10px;

}
66% {
transform:translate(0px,-16px);
}

88% {
transform:translate(0px,4px);

}
100% {
transform:translate(0px,0px);
}
}
@keyframes hue{
0%{filter: hue-rotate(0deg);}
100%{filter:hue-rotate(360deg);}

}

<!DOCTYPE html>
{% load static %}
<html>

<head>
    <meta charset="utf-8">
    <title>KBLOG</title>

    <!-- Latest compiled and manified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Alternative to Bootstrap 4 font_awesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- MEDIUM STYLE EDITOR -->
    <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css"
        media="screen" charset="utf-8">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">

</head>

<body class="loader">

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-custom bg-light techfont">
        <div class="container">
            <a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Tech Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span
                    class="navbar-toggler-icon"><img src="https://gaminyol.com/img/hello.svg"/></span></button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'about' %}">About</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="https://www.github.com">Github</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="https://www.linkedin.com">LinkedIn</a>
                    </li>
                    <li class="nav-item active">
                        {% if user.is_superuser %}
                        <a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
                        {% endif %}
                    </li>
                </ul>
            </div>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'post_new' %}">New Post</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'post_draft_list' %}">Drafts</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                    </li>
                    <li>
                        <a>Welcome: {{ user.username }}</a>
                    </li>
                    {% else %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'register' %}">Register</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-item nav-link" href="{% url 'user_login' %}" aria-label="Login"><span
                                class="fa fa-user" aria-hidden="true"></span></a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- The actual blog posts -->
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-4">
                <div class="blog_posts">
                    {% block body_block %}
                    {% endblock %}
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64813349

复制

相似问题

问为什么我在bootstrap中看不到humberger图标？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我在bootstrap中看不到humberger图标？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我在bootstrap中看不到humberger图标？
EN