如何将图标旁边的文字与CSS对齐？

Question

我想在其旁边绘制一个带有文字的图标，示例如下：

BAD示例：

@ 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 text text text text text
  text text text text text text

如何完成第二次示例？感谢。

Answer 1

方法1：Flexbox （干净标记，动态图标宽度）。

p {
  display: flex;
  width: 180px;
}

p:before {
  content: "@";
  padding-right: 4px;
}

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

方法2：相对+绝对位置（干净标记，固定图标宽度）。

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>

方法3：CSS表格布局（额外标记，动态图标宽度）。

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>

方法4：内联块（额外标记，动态图标宽度）。

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>

方法5：浮动（额外加价，动态图标宽度）。

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>

方法6：背景图像（使用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>

附加示例1：，包含Font Awesome +伪内容

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>

附加示例2：，包含Font Awesome +内联元素

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>