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.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With