Phone icon to header

Support
#1

Hi, how can i add phone icon to header (maybe to the nav bar or above it) and add link on it?

#2

Hi There @Velkka33

Thanks for writing in! You can enable Topbar by head over to X -> Theme Options -> Header -> Miscellaneous section and then add the following code into your Topbar Content area.

<a href="tel:12345678" title="Phone" target="_blank"><i class="x-icon" data-x-icon-s="&#xf098;" aria-hidden="true"></i> 12345678</a>

Hope that helps.

#3

Yes! Now I just need to know how to oder to go to right side?
And how to change the color of the text?
And is it impossible to put phone Icon straight to the menu?

#4

Hello @Velkka33,

I am not sure which stack you are using. Normally the color of the text in your topbar can be change in X > Theme Options > {Your Stack} > Topbar Content. With different stacks, you also have different settings.

And since it is a link, you can change the link color and link hover color in X > Theme Options > Typography > Site Links.

Please let us know if this works out for you.

#5

Thanks! How about this:

And is it impossible to put phone Icon straight to the menu?

#6

Hi @Velkka33,

To add the phone icon directly in your main menu, simply add the following code in your child theme’s functions.php file:

add_filter( 'wp_nav_menu_items','add_menu_item', 10, 2 );
function add_menu_item( $items, $args ) {
	$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-custom"><a href="tel:12345678" title="Phone" target="_blank"><i class="x-icon" data-x-icon-s="&#xf098;" aria-hidden="true"></i> 12345678</a></li>';
	return $items;
}

Replace the dummy phone number with actual number in the above code. Hope this helps!

#7

Worked well. Much appreciated!

#8

Glad we were able to help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.