how to change the color of the icons in nav ?

Topic: how to change the color of the icons in nav ?

Zhe Lee pro asked 5 years ago

Expected behavior change color of icons in nav to blue

Actual behavior still black no change

Resources (screenshots, code snippets etc.)

my.css #navbarSupportedContent > ul:nth-child(2) > li > a > i{ color: #007bf; }

I check the chrome dev shows that the CSS Invalid Property Value of my css file. So how to change the color of the icons in nav

html code :

```

Material Design Bootstrap

<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
  <div class="container">

    <!-- Brand -->
    <a class="navbar-brand waves-effect" href="https://mdbootstrap.com/docs/jquery/" target="_blank">
      <strong class="blue-text">MDB</strong>
    </a>

    <!-- Collapse -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <!-- Left -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link waves-effect" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/jquery/" target="_blank">About MDB</a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="https://mdbootstrap.com/docs/jquery/getting-started/download/"
            target="_blank">Free download</a>
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Free
            tutorials</a>
        </li>
      </ul>

      <!-- Right -->
      <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item">
          <a href="tencent://message/?uin=513278236&Site=gxlinzi.cn35so.cn&Menu=yes" class="nav-link waves-effect" target="_blank">
            <i class="fab fa-qq mr-2"></i>
          </a>
        </li>
        <li class="nav-item">
          <a href="https://twitter.com/MDBootstrap" class="nav-link waves-effect" target="_blank">
            <i class="fab fa-weixin mr-2"></i>
          </a>
        </li>
        <li class="nav-item">
          <a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded waves-effect"
            target="_blank">
            <i class="fab fa-freebsd mr-2"></i>SummerZ
          </a>
        </li>
      </ul>

    </div>

  </div>
</nav>
<!-- Navbar -->

  <!--Section: Post-->
  <section class="mt-4">

    <!--Grid row-->
    <div class="row">

      <!--Grid column-->
      <div class="col-md-12 mb-4">

        <!--Featured Image-->
        <div class="card mb-4 wow fadeIn">

          <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" class="img-fluid" alt="">

        </div>
        <!--/.Featured Image-->

        <!--Card-->
        <div class="card mb-4 wow fadeIn">

          <!--Card content-->
          <div class="card-body text-center">

            <p class="h5 my-4">What is MDB?</p>

            <p>MDB is world's most popular Material Design framework for building responsive, mobile-first
              websites and apps.</p>

            <h5 class="my-4">
              <strong>MDB - trusted by 400 000 + developers &amp; designers</strong>
            </h5>
            <hr>
          </div>

        </div>
        <!--/.Card-->

        <!--Card-->
        <div class="card mb-4 wow fadeIn">

          <!--Card content-->
          <div class="card-body">

            <p class="h5 my-4">That's a very long heading </p>


            <blockquote class="blockquote">
              <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer class="blockquote-footer">Someone famous in
                <cite title="Source Title">Source Title</cite>
              </footer>
            </blockquote>

            <p class="h5 my-4">That's a very long heading </p>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
              ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
              consequuntur maiores sed eligendi.</p>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
              ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
              consequuntur maiores sed eligendi.</p>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis
              ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,
              consequuntur maiores sed eligendi.</p>

          </div>

        </div>
        <!--/.Card-->

        <!--Card-->
        <div class="card mb-4 wow fadeIn">

          <div class="card-header font-weight-bold">
            <span>About author</span>
            <span class="pull-right">
              <a href="">
                <i class="fab fa-qq mr-2"></i>
              </a>
              <a href="">
                <i class="fab fa-weixin mr-2"></i>
              </a>
              <a href="">
                <i class="fab fa-instagram mr-2"></i>
              </a>
              <a href="">
                <i class="fab fa-linkedin-in mr-2"></i>
              </a>
            </span>
          </div>

          <!--Card content-->
          <div class="card-body">

            <div class="media d-block d-md-flex mt-3">
              <img class="d-flex mb-3 mx-auto z-depth-1" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg"
                alt="Generic placeholder image" style="width: 100px;">
              <div class="media-body text-center text-md-left ml-md-3 ml-0">
                <h5 class="mt-0 font-weight-bold">Caroline Horwitz
                </h5>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
                deleniti atque corrupti
                quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
                similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
                fuga.
              </div>
            </div>

          </div>

        </div>
        <!--/.Card-->

        <!--Comments-->
        <div class="card card-comments mb-3 wow fadeIn">
          <div class="card-header font-weight-bold">3 comments</div>
          <div class="card-body">

            <div class="media d-block d-md-flex mt-4">
              <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="Generic placeholder image">
              <div class="media-body text-center text-md-left ml-md-3 ml-0">
                <h5 class="mt-0 font-weight-bold">Miley Steward
                  <a href="" class="pull-right">
                    <i class="fas fa-reply"></i>
                  </a>
                </h5>
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                <div class="media d-block d-md-flex mt-3">
                  <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
                    alt="Generic placeholder image">
                  <div class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 class="mt-0 font-weight-bold">Tommy Smith
                      <a href="" class="pull-right">
                        <i class="fas fa-reply"></i>
                      </a>
                    </h5>
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque
                    ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
                    sunt explicabo.
                  </div>
                </div>

                <!-- Quick Reply -->
                <div class="form-group mt-4">
                  <label for="quickReplyFormComment">Your comment</label>
                  <textarea class="form-control" id="quickReplyFormComment" rows="5"></textarea>

                  <div class="text-center">
                    <button class="btn btn-info btn-sm" type="submit">Post</button>
                  </div>
                </div>


                <div class="media d-block d-md-flex mt-3">
                  <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
                    alt="Generic placeholder image">
                  <div class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 class="mt-0 font-weight-bold">Sylvester the Cat
                      <a href="" class="pull-right">
                        <i class="fas fa-reply"></i>
                      </a>
                    </h5>
                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                    sed quia non numquam eius modi
                    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                  </div>
                </div>
              </div>
            </div>
            <div class="media d-block d-md-flex mt-3">
              <img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" alt="Generic placeholder image">
              <div class="media-body text-center text-md-left ml-md-3 ml-0">
                <h5 class="mt-0 font-weight-bold">Caroline Horwitz
                  <a href="" class="pull-right">
                    <i class="fas fa-reply"></i>
                  </a>
                </h5>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
                deleniti atque corrupti
                quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
                similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
                fuga.
              </div>
            </div>

          </div>
        </div>
        <!--/.Comments-->

        <!--Reply-->
        <div class="card mb-3 wow fadeIn">
          <div class="card-header font-weight-bold">Leave a reply</div>
          <div class="card-body">

            <!-- Default form reply -->
            <form>

              <!-- Comment -->
              <div class="form-group">
                <label for="replyFormComment">Your comment</label>
                <textarea class="form-control" id="replyFormComment" rows="5"></textarea>
              </div>

              <!-- Name -->
              <label for="replyFormName">Your name</label>
              <input type="email" id="replyFormName" class="form-control">

              <br>

              <!-- Email -->
              <label for="replyFormEmail">Your e-mail</label>
              <input type="email" id="replyFormEmail" class="form-control">


              <div class="text-center mt-4">
                <button class="btn btn-info btn-md" type="submit">Post</button>
              </div>
            </form>
            <!-- Default form reply -->



          </div>
        </div>
        <!--/.Reply-->

      </div>
    </div>
    <!--Grid row-->

  </section>
  <!--Section: Post-->

</div>

<!--Call to action-->
<div class="pt-4">
  <a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank"
    role="button">Download MDB
    <i class="fas fa-download ml-2"></i>
  </a>
  <a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start
    free tutorial
    <i class="fas fa-graduation-cap ml-2"></i>
  </a>
</div>
<!--/.Call to action-->

<hr class="my-4">

<!-- Social icons -->
<div class="pb-4">
  <a href="https://www.facebook.com/mdbootstrap" target="_blank">
    <i class="fab fa-facebook-f mr-3"></i>
  </a>

  <a href="https://twitter.com/MDBootstrap" target="_blank">
    <i class="fab fa-twitter mr-3"></i>
  </a>

  <a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">
    <i class="fab fa-youtube mr-3"></i>
  </a>

  <a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">
    <i class="fab fa-google-plus-g mr-3"></i>
  </a>

  <a href="https://dribbble.com/mdbootstrap" target="_blank">
    <i class="fab fa-dribbble mr-3"></i>
  </a>

  <a href="https://pinterest.com/mdbootstrap" target="_blank">
    <i class="fab fa-pinterest mr-3"></i>
  </a>

  <a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">
    <i class="fab fa-github mr-3"></i>
  </a>

  <a href="http://codepen.io/mdbootstrap/" target="_blank">
    <i class="fab fa-codepen mr-3"></i>
  </a>
</div>
<!-- Social icons -->

<!--Copyright-->
<div class="footer-copyright py-3">
  © 2019 Copyright:
  <a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
</div>
<!--/.Copyright-->

// Animations initialization new WOW().init();

```

Add comment

Marta Szymanska staff pro premium answered 5 years ago