[Bug] Side Navigation Icon Issue

[nexadomain]

Version

1.0.2

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard/pages/dashboard.html

Operating System

Win 10

Device

Desktop

Browser & Version

Chrome 90.0.4430.212 and all

Steps to reproduce

In Side Navigation of Soft UI Dashboard,
Nav Link's icons are given with , but if we use for placing icons, color of icon is not matching with Soft UI Dashboard's theme.

Color Styling of only SVG icons i.e are given. No Color styling for other icons which uses are given.

What is expected?

Icons other than tags should have color which are matching with theme.

.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i {
color : _ _ _ _ _ _ ;
}

What is actually happening?

In Side Navigation of Soft UI Dashboard.
Color Styling of only SVG icons i.e are given. No Color styling for other icons which uses are given.

So, if we use other icons,

color of icon is matching with Side-bar theme.

---

Solution

Add color styling in CSS Stylesheet
{ assets/css/soft-ui-dashboard.css }

.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i {
color: #141727;
}

after
.navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon svg .color-foreground { }

Additional comments

[rarestoma]

Hi @nexadomain,

Thank you for working with our products and for pointing us this issue.

I just added it to the 'to do' list for the next update.

Thank you,
Rares

[nexadomain]

@rarestoma Here is the complete solution for Issue #11:-

File: Main > assets/css > soft-ui-dashboard.css

Add:-

1. .navbar-vertical.navbar-expand-xs .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }

2. @media (min-width:576px) {
   .....
   .navbar-vertical.navbar-expand-sm .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
   ....
   }

3. @media (min-width:768px) {
   ...
   .navbar-vertical.navbar-expand-md .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
   ...
   }

4. @media (min-width:992px) {
   ...
   .navbar-vertical.navbar-expand-lg .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
   ...
   }

5. @media (min-width:1200px) {
   ...
   .navbar-vertical.navbar-expand-xl .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
   ...
   }

6. @media (min-width:1400px) {
   ...
   .navbar-vertical.navbar-expand-xxl .navbar-nav>.nav-item>.nav-link .icon i { color: #141727; }
   ...
   }

7. For Active Icon
   .navbar-vertical .navbar-nav>.nav-item .nav-link.active .icon i { color: #fff; }

[rarestoma]

Hi @nexadomain,

Thank you for giving the solution. I will test it and introduce it in the next update.

Best regards,
Rares