Docs

[nathanr_]

Hi,

I have used this following code in the footer of my website in a widget to add icons next to text:

Manchester Office: 0161 820 8888

London Office: 0207 592 0206

<b>enquiries@monarchsolicitors.co.uk</b>

<p></p>
</font>

Monarch Solicitors Ltd
Express Networks Building
1 George Leigh Street,
Manchester,
M4 5DL

add added the following css:

/* phone icon – FOOTER
———————————*/

.x-footer-phone-icon {
width: 400px;
height 10px;
padding: 3px;
display: block;
text-indent: +35px;
background-image: url(http://webdesign25.co.uk/wp-content/uploads/2017/02/ms-phone-icon-1.png);
background-repeat: no-repeat;
}

/* mail icon – FOOTER
———————————*/

.x-footer-mail-icon {
width: 400px;
height 10px;
padding: 3px;
display: block;
text-indent: +35px;
background-image: url(http://webdesign25.co.uk/wp-content/uploads/2017/02/ms-mail-icon-1.png);
background-repeat: no-repeat;
}

/* location icon – FOOTER
———————————*/

.x-footer-location-icon {
width: 400px;
height 10px;
padding: 3px;
display: block;
text-indent: +35px;
background-image: url(http://webdesign25.co.uk/wp-content/uploads/2017/02/ms-location-icon.png);
background-repeat: no-repeat;
}

This works perfectly for what I was trying to achieve, well nearly. If you see the attached image of the footer, you can see the second line of text for the address is out of sync with all the rest of the text, I’m hoping you can advise me on how to alter the above code slightly so that it is in line?

Thank you
Nathan

[nathanr_]

This reply has been marked as private.

[nathanr_]

This reply has been marked as private.

[Nabeel A]

Hi again,

For the last section you can replace your HTML code with this:

<div style="display: table;"><a href="mailto:enquiries@monarchsolicitors.co.uk" style="display: table-cell;"><img src="http://webdesign25.co.uk/wp-content/uploads/2017/02/ms-location-icon.png"></a><a style="display: table-cell; padding: 0 0 0 10px; vertical-align: top;">Monarch Solicitors Ltd<br>
Express Networks Building<br>
1 George Leigh Street,<br>
Manchester,<br>
M4 5DL</a></div>

Let us know how this goes!

[nathanr_]

That worked great! 🙂

Thank you for your help, have a good day.

[Lely]

You’re welcome Nathan!

Cheers!

[Author]

Posts