Icon menu with font-awesome

Hi
I don’t know whether my question will be of your scope or not
I’m asking it all the same
I thank you whatever the result will be :)

→ I want to add an icon in my menu, prior the item of each item
→ I want this icon change from one to another with the status ::hover :active or :focus (i.e empty circle and filled circled with :hover navigation)

I’ve succed in add the font with en enqueue in my functions.php
I’ve add this liine of code (+add the class in appereance > Menu)

.fa::before {
    content: "\f021";
    float: left;
    font-family: FontAwesome;
    margin-left: 22px;
    margin-top: 5px;
    width: 30px}
.fa:hover, .fa:focus, .fa:active {
    content: "\f111"!important /*cannot make this line work*/;
    color:#e30613!important;}

but I can’t overide the previous icon “\f021” with another in :hover status
Which way should I take to do so ?

Many many thanks for your help

• This topic was modified 9 years, 7 months ago by Ikyo.