javascript - 如何使图标与文本左侧分开？

Question

这是我的代码:

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    <span>
      <i class="fa fa-check"></i>
      this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .
    </span>

看到了吗？复选图标是文本的一部分，我不想要它。我想将所有文本垂直对齐(在左侧)。我该怎么做？

Answer 1

你可以只添加一个display: flex;

span {
  display: flex;
}

i.fa-check {
  margin-right: .5rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<span>
      <i class="fa fa-check"></i>
      this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .
    </span>