How to change the properties of a fontawesome icon inside a div? - html

Question

I've been trying to change the icon on my website's side navigation bar to beige but I cannot seem to do it...
I am aware that I should override the icon's property in CSS to do so however, I'm not sure which property I should set
I've tried:
setting .fa-twitter class position to relative
setting .fa-twitter class color to beige
creating a div for the icons inside the parent side navigation div
then changing class fa-twitter's color to white
notes: I used a hover animation for my navigation bar so I want that to stay
HTML:
<div class="container">
<div class="sidebar">
<img id="mainicon" src="mainicon.png">
<h2>Nikukurin</h2>
<hr>
<a id="hvr-bounce-to-right" href="#">HOME</a>
<a id="hvr-bounce-to-right" href="#">PORTFOLIO</a>
<a id="hvr-bounce-to-right" href="#">COMMISSIONS</a>
<a id="hvr-bounce-to-right" href="#">PRODUCTS</a>
</div>
</div>
CSS:
.container {
display: flex;
flex-direction: row;
}
.sidebar {
text-align: center;
position: fixed;
width: 20%;
top: 0;
bottom: 0;
left: 0;
min-width: 200px;
background: #ff9999;
padding: 1%;
}
#mainicon {
border-radius: 50%;
width: 40%;
padding: 3%;
}
.sidebar a {
text-align: left;
text-decoration: none;
display: block;
padding: 5%;
color: beige;
font-family: nikuhead;
letter-spacing: 2px;
position: relative;
margin: 5%;
}
#hvr-bounce-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffbc57;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#hvr-bounce-to-right:hover,
#hvr-bounce-to-right:focus,
#hvr-bounce-to-right:active {
color: #ff6666;
text-decoration: none;
}
#hvr-bounce-to-right:hover:before,
#hvr-bounce-to-right:focus:before,
#hvr-bounce-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
output right now:
output i want: there's supposed to be a twitter icon right under the "nikukurin" and it's supposed to be white but it's the same color as the div background
thank you for taking the time to read this and thank you for anyone answering in advanced!

Answer 1

ok i found the answer!
so what i was doing wrong is particularly this line:
which was supposed to be
<i class="fa fa-twitter"></i>

Answer 2

First thing is u are missing syntax ,
<i class="fa fa-twitter"></i>
And if that doesn't change the color then:
.sidebar a{
color : white;
}

Answer 3

your code should be changed to this:
<i class="fa fa-twitter"></i>

Answer 4

I am unable to understand the question clearly but whatever i have understood you have to first correct html syntax
<i class="fa fa-twitter"></i>
it will show you the icon, then apply the css to change the icon color
.sidebar a{color:#F5F5DC}