How can I stop a line of copy breaking under an icon?

Hi,

I have the following code:

<address class="address">
                                    <i title="" aria-hidden="true" class="fa fa-map-marker orange"></i> Quite a Long, Address, Here, 123
                                 </address>

What is happening is that when the window is shrunk down, the address line breaks onto a new line naturally, but appears under the icon in the tag. Is there a way to have the address line continue after the width of the icon so both lines are kept in-line vertically?

Thanks

Hi,

You didn’t post the style, if there is any, but you could use left padding same as the icon width and then indent the line pulling the icon back. If the line wrap, the padding will protect the space under the icon.

Try:

.address{
    padding-left:24px;
    text-indent:-24px;
}

Hi, @toolman.

When you post code, please post a minimal “working page”, a CodePen, or provide a link to your site. You have been posting snippits that do not demonstrate the issue and require a lot of assumptions on our part or requests for more code.

Please help us help you by posting more appropriate code with your initial post.

Thank you.

PS: A bit of formatting wouldn’t hurt, either.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.