Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1361505
    nathanr_
    Participant

    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

    #1361515
    nathanr_
    Participant
    This reply has been marked as private.
    #1361518
    nathanr_
    Participant
    This reply has been marked as private.
    #1361767
    Nabeel A
    Moderator

    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!

    #1362652
    nathanr_
    Participant

    That worked great! 🙂

    Thank you for your help, have a good day.

    #1362811
    Lely
    Moderator

    You’re welcome Nathan!

    Cheers!

  • <script> jQuery(function($){ $("#no-reply-1361505 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>