If you write a phone number as a text, and not as a link, it will not be clickable on desktop, but most likely phones with iOS and Android will find out it’s a phone number and make it clickable.
But:
- it’s maybe only a matter of time before desktop browsers spot it as a
phone link to and propose actions on it, it could happen during an
update, overnight (but I think not in the immediate future. Safari
could do it soon when you’ve hooked up an iPhone to OS X, allowing to
click on desktop and take the call on the iPhone or on OSX through
the iPhone)
- on mobile, the phone number may take a style that you don’t control.
Now for your icon, you’re right: set a div with round corners 50%, type and style your text (number) inside it, add a 25px or so of left padding, and add the GIF, SVG or PNG icon as a background, with non repeat, and position it as desired. I suggest using SVG, most icon banks have SVG versions of icons. You can get one for free on www.nounproject.com for example.
You can also style a phone number in a text, inline, by selecting the number, clicking on the brush icon, giving a class to the created span element, and repeating the procedure above: left padding and icon as background no-repeat.
Now there’s a specific HTML code for phone numbers. It’s <a href="tel:18475555555">1-847-555-5555</a>
and Webflow allows you to set it in the UI (click on the phone icon in link properties). It will allow everyone with appropriate setup to catch those links (Skype, SIP clients (telephony over IP)… or OS X with an iOS device hooked to it (using the Facetime app). The “tel:” property doesn’t always work, sometimes the “callto:” property works better.
http://vincent.polenordstudio.fr/snap/ty4v9.jpg
Here’s the “tel:” property in action, see what it does on your desktop computer: 1-847-555-5555 (On Safari OS X it shows as a link but clicking does nothing, I don’t have any software taking up the link on this computer apparently)
So there’s apparently nothing perfect you can do with only HTML. With the help of Javascript, it’s possible to detect wether you’re on a mobile browser or not and to transform the link accordingly. A quick search brings http://detectmobilebrowsers.com/ but there are I guess many other ways to do it.
Also, depending on how you write your number, it will have various results when automatically catch by mobile browsers. Here’s a test result I found there:
- 555-5555 (iPhone Only)
- (555) 555-5555 (Android + iPhone)
- +1 (555) 555-5555 (iPhone Only)
- 555 5555 (iPhone Only)
- 555 555 5555 (Android + iPhone)
- +1 555 555 5555 (iPhone Only)
- 555.5555 (iPhone Only)
- 555.555.5555 (Android + iPhone)
- +1 555.555.5555 (iPhone Only)