Add fontawesome icons to mobile header

Hi there,

Does this help?
https://generatepress.com/forums/topic/add-phone-icon-to-right-of-menu-in-mobile-header/

Using the help video on the Hook Element, I've been able to take my code from the Top Bar and put it in a the hook - generate_inside_mobile_header
The three icons show up on the left edge of the mobile header, I would like them to be right of the logo. The site is really coming along great, thanks to your help there at GP!

<i class="fa fa-phone" style="color:green;"><!-- icon --></i> 

 <i class="fa fa-comment" style="color:light-blue;"><!-- icon --></i> 

<i class="far fa-envelope" style="color:light-blue;"><!-- icon --></i>

I tried th e CSS that David provided in the thread Add-phone-icon-to right-of-menu-in-mobile-header

#mobile-header .phone-icon {
order: 4 !important;
margin-right: 10px;
}

and I tried shifting an icon using the below code without success

.fa.fa-phone {
margin-left: l0px !important;
}

Glad to hear :)

Thanks for taking a look, I am still trying to move the three font awesome icons to the right of my mobile logo.

Can you give each of those <a> tag a custom class?

Sorry, I'm lost. I don't know how to go about creating the custom class.

Like this:
https://teamtreehouse.com/community/how-do-i-add-a-class-to-an-anchor-tag

Ok, thanks. Looking at the teamtreehouse page, I changed my hook to the code below. But when I am not able to move the icon with CSS when targeting .phone-icon. Did I create the class correctly?

<a href="tel:7606220141" /><i class="fa fa-phone" style="color:green;"><!-- icon --></i>&ensp;

Try something like this:

a.phone-icon {
    order: 2;
}

The code got changed on the above when I sent it. I actually had <a class and "phone-icon" in the hook.

Here is another try at showing the code in my hook. I'm not seeing results with CSS

a.phone-icon {
order: 2;
}

<i class="fa fa-phone" style="color:green;"><!-- icon --></i> 

The code changed again when I sent it. I see there is a tab for code above, here's another try.

`<i class="fa fa-phone" style="color:green;"><!-- icon --></i> 

 <i class="fa fa-comment" style="color:light-blue;"><!-- icon --></i> 

<i class="far fa-envelope" style="color:light-blue;"><!-- icon --></i>

I'm not seeing the CSS being added.

When I add it using browser inspector tool, it works:
https://www.screencast.com/t/wy8XwSWQnQ

Please remember to highlight you code and click the CODE button in the editor here.

Didn't go through accurately again. I guess I could send a screenshot.