0

For some reason the icon does not change colour to red. It remains white/grey.

Does anyone know how to change colour to red?

.sidebar .nav-item .nav-link[data-toggle=collapse]::after {
            color: red;
            width: 1rem;
            text-align: center;
            float: right;
            vertical-align: 0;
            border: 0;
            font-weight: 900;
            content: '\f107';
            font-family: 'FontAwesome';
        }

There are heaps of other questions that do NOT refer to the "CSS Pseudo-elements" which is the type that i am using.

Random Stuff
  • 172
  • 2
  • 12
  • 2
    Does this answer your question? [Can I change the color of Font Awesome's icon color?](https://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-icon-color) – Awais Feb 04 '20 at 08:59
  • check class name which you have given and this structure (.sidebar .nav-item .nav-link[data-toggle=collapse]::after) because you have written parent to child relation – PDSSandeep Feb 04 '20 at 09:02
  • @Awais, thank you. However that is not using the CSS Pseudo-elements – Random Stuff Feb 04 '20 at 09:02
  • @RandomStuff fontawesome icons act as text just like you give color to text using `color` property i behave just like that. just make sure that there is no overriding styles. – Awais Feb 04 '20 at 09:04
  • Go into the the inspector and see if there is anything else that is overriding your styles - your code should work fine. – MattHamer5 Feb 04 '20 at 09:06

1 Answers1

0
.icon-classname{
  color: #f00;
}
PDSSandeep
  • 179
  • 10