Stop Text From Wrapping Under An Icon Inside An Anchor

I'm trying to create a link that is represented by an icon (I'm using font-awesome for icons) and some text. If the text wraps down to the next line I want it in line with the text

Solution 1:

From my comment:

the warning is about <p> and <i> side by side, turn p into a span and add display:block to the span (aside overflow) :)

.fa {
  float:left;
  padding:02em;
  }
aspan {
  display:block;
  overflow:hidden;

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet"/><ahref="#"><iclass="fa fa-exclamation-circle"></i><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span></a>

Solution 2:

you can float the i then apply padding-left to span (changed from p)

a {
  display: block;
  border: red solid
}
i {
  float: left
}
span {
  padding-left: 20px;
  display:block; /* to make span a block element */
}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet" /><a><iclass="fa fa-exclamation-circle"></i><span>Text of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the linkText of the link Text of the link Text of the link Text of the link</span></a>

Solution 3:

Try setting your icon in absolute position and adding padding-left to your link (with the width of your icon and the margin you want between your icon and your text). For example, if you icon is 15px wide and you want 5px margin between your icon and your text, do this :

a {
    position: relative;
    padding-left: 20px;
}
i {
    position: absolute;
    top: 0;
    left: 0;
}

Solution 4:

try with this below code it may help you.

p{display: inline;}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet"/><a><iclass="fa fa-exclamation-circle"></i><p>Text of the link</p></a>