Phone Number & Icon

[arkercon]

Hello,
I have a Top Bar that’s also visible on mobile devises (I want it visible).
I’d like to include a phone number and phone icon with my Social Media links in the Top Bar.
I’d like the phone icon to be clickable, (where if accessed on a mobile devise, prompts the user to complete the call).
It’s not so important that it be clickable on a desktop but, it’s ok..

I am also solving a space problem and it’s ok that the phone digits disappear on a mobile (but the fa-phone icon remain).
It’s important for the phone digits to be visible on the desktop/laptop.

There are pieces of this puzzle in other threads but nothing that joins them together.
adding a fa-phone icon: http://www.swiftideas.com/forums/topic/contact-icons-in-the-header-top-bar/
example of “clickable” phone number: http://www.swiftideas.com/forums/topic/dante-top-menu-on-mobile/

Is there an easy, straight forward way to do this?
I tried many combinations but couldn’t figure it out.

My current solution uses a table after the social media icons to display the phone # but the use of margins don’t work well on mobile Safari. I accessed this via Theme Options=>Header Options=>Top Bar right text config.

Hope to hear back!
_K

[David Martin – Support]

1) You can use this icon <i class="fa-phone"></i>

To link that to a the icon, you’d use <a href="your-link.com"><i class="fa-phone"></i></a>.

To link to a telephone number, you can read these instructions: https://css-tricks.com/the-current-state-of-telephone-links/

2) To hide the numbers on mobile, wrap them in a custom class that hides content on small screens hidden-xs, ex: 987987987.

Thanks.

[arkercon]

Thank you! I got it, well, most of it anyway…
I wasn’t able to figure out how to properly format the hidden-xs for the phone digits in my header bar.
I want to hide “(myP)-hon-eNum” on xs devises so that the top bar collapses back to its intended size.

The following code snips are from my Theme Options=>Header Options=>Top Bar right text config

(to display the fa-phone icon like my other SM icons)
<li class =“fa-phone”><i class=”fa-phone”></i><i class=”fa-phone”></i>

(to display the phone digits on desktops and tablets)
<li style=”height: 30px; line-height: 30px;font-size:17px;display:table-cell; vertical-align: middle; margin-top: 5px;font-weight: bold;”>(myP)-hon-eNum

Attachments:

You must be logged in to view attached files.

[arkercon]

Sorry, the code snips I am using should read:

(to display the fa-phone icon like my other SM icons)
<li class =“fa-phone”><i class=”fa-phone”></i><i class=”fa-phone”></i>

(to display the phone digits on desktops and tablets)
<li style=”height: 30px; line-height: 30px;font-size:17px;display:table-cell; vertical-align: middle; margin-top: 5px;font-weight: bold;”>(myP)-hon-eNum

[David Martin – Support]

You would add the small hide class to the li <li class="hidden-xs">. That will hide the <li> on small devices.

[arkercon]

Resolved!
Thanks David!

_K

[David Martin – Support]

Very glad to help you out.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

[arkercon]

This reply has been marked as private.

[David Martin – Support]

Thanks, yes it’s on ThemeForest, under your ‘downloads’ section.

Cheers.