I want to flip an icon from the topbar of a website - html

Question

I have this website: https://www.luxit.com.au/. I want to flip the phone icons from the top bar.
I inspected the page and use the class but that is not working. Then I notice that this is a sub-class, that is mentioned with i and then class and then on the last again i.
Can someone help me to find or how to write this type of class correctly in custom CSS. Thank you

Answer 1

Change
fa-phone
to
fa-phone-alt
in the i tag for the icons you want to flip.
e.g. instead of
<i class="fa fa-phone"></i>
change it to
<i class="fa fa-phone-alt"></i>
These are Font Awesome icons, see here https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=phone

Answer 2

You have looked at the relevant code, one good trick is to copy it (Edit HTML and copy it in your devtools) and lay it out properly so you can see what is nested in what.
This is the code in the area you are interested in:
<span class="topbar-content">
<i class="fa fa-phone"></i>
<span>
1300 724 555 </span>
<span> | </span>
<i class="fa fa-phone"></i>
<span>
0452 611 880
</span>
<span class="mobile-clr">
<span> | </span>
</span>
<i class="fa fa-bell"></i>
<span>7am - 10pm, 7 days </span>
<span class="mobile-clr">
<span> </span>
</span>
</span>
I am not clear whether you want to get rid of the lot, in which case:
.topbar-content { visibility: hidden; }
(do this instead of display: none in case some other spacing/positioning is relying on it)
or whether you want to get rid of just one phone number in which case you could start to use nth-of-type but it depends which one you want to get rid of. Let me know if that's the case.