Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align text next to an icon with CSS?

Tags:

html

css

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.

like image 665
Yura Avatar asked Jul 08 '15 14:07

Yura


2 Answers

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>
like image 75
Stickers Avatar answered Nov 05 '22 12:11

Stickers


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>
like image 41
Juan Mendes Avatar answered Nov 05 '22 11:11

Juan Mendes