How to align text next to an icon with CSS?

yuRa Published at Dev

Yura

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.

Stickers

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.