Add a phone icons AND a phone number to social icons?

In the end I managed to do it, to a point. I worked whole day on it – I wanted to make ti work from inside the Enfold, without editing templates.

I added a normal mail icon, top right, and added a link + an icon to it and some styling. It does look nice, but I had to do some weird half pixel dimensions.

Can you pls. check the CSS if I did it OK? I see that smooth animation is not perfect.

This is the code:

<a style="supphone" title="Support" href="tel:0800800800">0800 800 800</a>

.supphone { padding:0!important; line-height: 0px!important; border-right:1px solid rgb(235, 235, 235)!important; margin-right:-11px}

.supphone a {
font-weight: normal!important;
display:block!important; 	
line-height: 29.4px!important;
padding:0 8px 0 7px!important;
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: ease-out; }

.supphone a:hover {text-decoration: none; color:white!important; background: #12a5f4; }

.supphone a:after {
font-family: 'entypo-fontello'!important;	
margin-left:7px!important;
font-size: 13px!important;
position: relative!important;
bottom: -1px!important;
content:"\e806"; /*srce*/
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: ease-out;
}

.supphone:hover a:after { 
color: white;
}

• This reply was modified 4 years, 2 months ago by MORTULGAAH.