Hi @Damian

I want to use counter on Navigation but it show the counter values on right side rather I want to be shown on Left side of icon.

<navlinks>
      <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
        <!-- Mail -->
        <li class="nav-item dropdown btn-group pr-lg-3" dropdown>
          <a  dropdownToggle type="button" class="navite nav-link dropdown-toggle waves-light " mdbWavesEffect>
            <i class="fas fa-envelope fa-lg left"></i>
          </a>
          <span class="counter">22</span>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right " role="menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <!-- Notifications -->
        <li class="nav-item dropdown btn-group  pr-lg-3" dropdown>
          <a dropdownToggle type="button" class=" navite nav-link dropdown-toggle waves-light" mdbWavesEffect>
            <i class="far fa-bell fa-lg"></i>
          </a>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right notification-drop  scrollbar-night-fade thin ">
            <h6 class="dropdown-header"> Notifications</h6>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-comments light-blue-text pr-2"></i>Daniel Commented about..
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-user-plus amber-text pr-2"></i>12 New Users added
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-heart red-text pr-2"></i>New Company created
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-building light-blue-text pr-2"></i>12 New company added
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-heart red-text pr-2"></i>New Company liked your product
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-comments light-blue-text pr-2"></i>Claude Commented about..
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-comments light-blue-text pr-2"></i>Wow you have completed
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-snowflake green-text pr-2"></i>3 New Suppliers Created
                </a>
                <h6 class="dropdown-footer py-2 text-center"><a href="" >View all</a></h6>
          </div>
        </li>
        <!-- Themes -->
        <li class="nav-item dropdown btn-group wrapper-dropdown-3 pr-lg-3 " dropdown>
          <a dropdownToggle type="button" class=" navite nav-link dropdown-toggle waves-light" mdbWavesEffect>
            <i class="fas fa-palette fa-lg"></i>
          </a>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right rounded ">
              <a class="dropdown-item pink-text " href="#">
                  <i class="fas fa-circle pink-text  fa-2x pr-2"></i> Pink Theme
              </a>
              <a class="dropdown-item deep-purple-text" href="#">
                  <i class="fas fa-circle  deep-purple-text fa-2x pr-2"></i> Deep-Purple Theme
              </a>
              <a class="dropdown-item grey-text" href="#">
                  <i class="fas fa-circle grey-text fa-2x pr-2"></i> Grey Theme
              </a>
              <a class="dropdown-item black-text" href="#">
                  <i class="fas fa-circle black-text fa-2x pr-2"></i> Black Theme
              </a>
              <a class="dropdown-item light-blue-text" href="#">
                  <i class="fas fa-circle light-blue-text fa-2x pr-2"></i> Light Blue Theme
              </a>
          </div>
        </li>
</ul>
</navlinks>

How to add counter on fa-envelope...guide me! I Want to customize the Navigation counter like the image which is ADMIN LTE