bw_tel shortcode with the link=y parameter and some custom CSS to create a styled phone link allowing your site visitors to call you directly.
[bw_tel link=y class=phone]
Custom CSS
Style the tel: link
a[href^=tel] { font-size: 150%;
background-color: #6a6a6a;
padding: 5px 10px 5px 20px;
border-radius: 25px 0 0 25px;
border-left: 0px solid;
text-decoration: none;
display: inline-block;
}
Hover styling
a.phone:hover, a.phone span.value:hover { text-decoration: none; color: #66ff66; }
Rotated phone in a circle replacing 'Tel'
span.phone span.type
{ background: url( //oik-plugins.com/wp-content/plugins/oik/images/Phoneicon.svg ) no-repeat 5px 5px;
background-size: 20px 20px;
width: 30px; height: 30px;
background-color: #66ff66;
padding: 0px 0px 0px 0px;
margin-top: -5px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
border: 2px solid #000000;
border-radius: 50%;
vertical-align: middle;
text-indent: -9999px;
display: inline-block;
}
Hide the ': ' separator
span.phone span.sep { display: none; }
Left pad the telephone number
span.phone span.value { padding-left: 10px; color: #ffffff; }
Notes
- Use
link=yorlink=tto create a tel: link - Use the
link=parameter with the following shortcodes: - Either use a custom CSS file oik options > Overview: Custom CSS or the [bw_css] shortcode.
