css Bootstrap navbar-toggler-icon不会改变颜色

idv4meu8 于 2023-06-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(181)

我在Bootstrap 5中尝试更改导航栏切换图标的颜色时偶然发现了一个问题。我知道有两种预设的颜色，“navbar-light”和“navbar-dark”，但它们不适合我的主题，所以我尝试将颜色更改为纯白色。但它没有工作，然后我开始谷歌搜索，看看是否有人有一个解决方案，但令我惊讶的是，没有一个解决方案，我从谷歌搜索帮助我的情况。我不知道为什么我的图标是决心不改变，因为它的工作对其他人都很好。所以现在我在这里伸出手来，看看你们中是否有人有适合我的解决方案，因为可能有一千个这样的帖子，但没有一个适用于我的情况（至少我试过的那些我可能是哑巴）。以下是我的HTML：

<nav class="navbar navbar-expand-lg py-0 px-3 fixed-top">
    <a class="navbar-brand" href="https://www.toleka.se/" target="_blank">
      <img src="https://www.toleka.se/_siteimages/favicon.ico" alt="toleka-logo" width="40" height="40" />
    </a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="navbar-nav p-sm-4 p-md-0">
        <li class="nav-item">
          <a href="index.html" class="nav-link p-sm-3 fs-5 text-light">Hem</a>
        </li>
        <li class="nav-item dropdown">
          <a href="html/industrisakerhet/industrisakerhet.html" class="nav-link p-sm-3 fs-5 text-light"> Industrisäkerhet </a>
        </li>
        <li class="nav-item">
          <a href="html/trucksakerhet/trucksakerhet.html" class="nav-link p-sm-3 fs-5 text-light">Trucksäkerhet</a>
        </li>
        <li class="nav-item">
          <a href="html/travers/travers.html" class="nav-link p-sm-3 fs-5 text-light">Travers</a>
        </li>
        <li class="nav-item">
          <a href="html/logistikcenter/logistikcenter.html" class="nav-link p-sm-3 fs-5 text-light"> Logistikcenter </a>
        </li>
        <li class="nav-item">
          <a href="html/informativa-losningar/informativa-losningar.html" class="nav-link p-sm-3 fs-5 text-light"> Informativa lösningar </a>
        </li>
      </ul>
    </div>
  </nav>

我试过在我的css文件中添加过滤器，然后直接添加到元素中，都是用！重要的是，我已经尝试改变边界颜色，轮廓颜色，颜色等在我的css与！很重要，但没有任何工作。但我不知道，也许我是愚蠢的，这是非常简单的，无论如何，谢谢你：）

css

来源：https://stackoverflow.com/questions/76532056/bootstrap-navbar-toggler-icon-wont-change-color

1条答案

按热度按时间

6ovsh4lw1#

您需要更改CSS background-image属性，更准确地说，是SVG的stroke属性。
一些颜色示例：

红色：stroke='rgba(255, 0, 0, 1)'
绿色：stroke='rgba(0, 255, 0, 1)'
蓝色：stroke='rgba(0, 0, 255, 1)'
黄色：stroke='rgba(255, 255, 0, 1)'
橙子：stroke='rgba(255, 165, 0, 1)'
紫色：stroke='rgba(128, 0, 128, 1)'
等等的。

请参见下面的片段。

.nav-item a {
  color: black !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg py-0 px-3 fixed-top">
    <a class="navbar-brand" href="https://www.toleka.se/" target="_blank">
      <img src="https://www.toleka.se/_siteimages/favicon.ico" alt="toleka-logo" width="40" height="40" />
    </a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="navbar-nav p-sm-4 p-md-0">
        <li class="nav-item">
          <a href="index.html" class="nav-link p-sm-3 fs-5 text-light">Hem</a>
        </li>
        <li class="nav-item dropdown">
          <a href="html/industrisakerhet/industrisakerhet.html" class="nav-link p-sm-3 fs-5 text-light"> Industrisäkerhet </a>
        </li>
        <li class="nav-item">
          <a href="html/trucksakerhet/trucksakerhet.html" class="nav-link p-sm-3 fs-5 text-light">Trucksäkerhet</a>
        </li>
        <li class="nav-item">
          <a href="html/travers/travers.html" class="nav-link p-sm-3 fs-5 text-light">Travers</a>
        </li>
        <li class="nav-item">
          <a href="html/logistikcenter/logistikcenter.html" class="nav-link p-sm-3 fs-5 text-light"> Logistikcenter </a>
        </li>
        <li class="nav-item">
          <a href="html/informativa-losningar/informativa-losningar.html" class="nav-link p-sm-3 fs-5 text-light"> Informativa lösningar </a>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

赞(0）回复(0）举报 2023-06-25

我来回答

css Bootstrap navbar-toggler-icon不会改变颜色

1条答案

相关问题

热门标签

最新问答