How to align text next to an icon with CSS?

Question

I would like to draw an icon, with text next to it, examples below:

BAD example:

@ text text text text text text
text text text text text text
text text text text text text

GOOD example:

@ text text text text text text
  text text text text text text
  text text text text text text

How can the 2nd example be done please? Thanks.

Answer 1

Approach 1: Flexbox (clean markup, dynamic icon width).

 p { display: flex; width: 180px; } p:before { content: "@"; padding-right: 4px; } 

 <p>The quick brown fox jumps over the lazy dog.</p> 

Approach 2: relative + absolute positions (clean markup, fixed icon width).

 p { width: 180px; position: relative; padding-left: 20px; } p:before { content: "@"; position: absolute; left: 0; } 

 <p>The quick brown fox jumps over the lazy dog.</p> 

Approach 3: CSS table layout (extra markup, dynamic icon width).

 p { width: 200px; display: table; } p:before, p>span { display: table-cell; vertical-align: top; } p:before { content: "@"; padding-right: 4px; } 

 <p><span>The quick brown fox jumps over the lazy dog.</span></p> 

Approach 4: inline block (extra markup, dynamic icon width).

 p { width: 200px; white-space: nowrap; } p:before, p>span { display: inline-block; vertical-align: top; } p:before { content: "@"; margin-right: 4px; } p>span { white-space: normal; } 

 <p><span>The quick brown fox jumps over the lazy dog.</span></p> 

Approach 5: float (extra markup, dynamic icon width).

 p { width: 200px; overflow: auto; } p:before { content: "@"; float: left; margin-right: 4px; } p>span { display: block; overflow: auto; } 

 <p><span>The quick brown fox jumps over the lazy dog.</span></p> 

Approach 6: background-image (example of using svg)

 p { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'%3E%3Cpath d='M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm10 13.8L13.8 16l-3.6-3.6 2.2-2.2z'%3E%3C/path%3E%3Cpath d='M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z'%3E%3C/path%3E%3C/svg%3E") 0 2px / 14px 14px no-repeat; width: 180px; padding-left: 20px; } 

 <p>The quick brown fox jumps over the lazy dog.</p> 

Additional example 1: with Font Awesome + pseudo content

 p { width: 180px; position: relative; padding-left: 20px; } p:before { font-family: FontAwesome; content: "\\f164"; position: absolute; left: 0; } 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <p>The quick brown fox jumps over the lazy dog.</p> 

Additional example 2: with Font Awesome + inline element

 p { width: 180px; position: relative; padding-left: 20px; } .fa { position: absolute; left: 0; } 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <p><i class="fa fa-star"></i>The quick brown fox jumps over the lazy dog.</p> 

Answer 2

Here's a way to do it with text, using absolute positioning.

 div { width: 100px; position: relative; padding-left: 1em; } div span { position: absolute; left: 0; } 

 <div><span>@</span>text text text text text text text text text text text text text text text text text text text text text text text text text </div>