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

Question

我想画一个图标,旁边有文字,下面的例子:

不好的例子:

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