如何让Font Awesome图标独立显示在文本左侧并与文本分离？

Hey there! Let's sort out that icon alignment issue for you. Right now, the check icon and your text are inline elements crammed together—here are a couple of simple, reliable ways to get the icon sitting neatly on the left with proper spacing:

Method 1: Use Flexbox (Recommended for Modern Layouts) #

Flexbox is the cleanest way to control alignment and spacing between elements. Wrap your icon and text in a container, then use flex properties to position them:

HTML #

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="icon-text-wrapper">
  <i class="fa fa-check"></i>
  <span class="text-block">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>
</span>

CSS #

.icon-text-wrapper {
  display: flex;
  align-items: flex-start; /* Aligns icon and text at the top; use 'center' for vertical centering */
  gap: 12px; /* Adjust this value to control spacing between icon and text */
}

.text-block {
  flex: 1; /* Ensures text takes up remaining space and wraps correctly */
}

Method 2: Inline-Block with Margin (Quick Fix) #

If you prefer a simpler approach without flexbox, add spacing to the icon directly and align it with the text:

CSS #

.fa.fa-check {
  display: inline-block;
  margin-right: 12px; /* Adds space between icon and text */
  vertical-align: top; /* Aligns icon with the top of your text */
}

HTML (No changes needed to your original structure) #

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

Either of these approaches will separate the icon from the text, making it clearly visible on the left without merging into the content.

内容的提问来源于stack exchange，提问作者Martin AJ