[Resolved] Add fontawesome icons to mobile header

[Edward]

I have added contact icons and links using href in my top bar on the desktop, and that is working well. But on mobile view, I have hidden the top bar to save space. I would like to display only the fontawesome icons with links on my mobile header. I have gone to Appearance – Elements and selected the generate_inside_mobile_header hook. But I’m not sure where to go from here. Thanks for checking out my issue!

[Leo]

Hi there,

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

[Edward]

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;
}

[Leo]

Glad to hear 🙂

[Edward]

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

[Leo]

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

[Edward]

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

[Leo]

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

[Edward]

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;

[Leo]

Try something like this:

a.phone-icon {
    order: 2;
}

[Edward]

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

[Edward]

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> 

[Edward]

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>

[Leo]

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.

[Edward]

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

[Author]

Posts