html - 如何缩进文本以避免环绕图标？

Question

我正在使用 Ionicon 图标和 Bootstrap 来创建自定义元素符号列表(参见图片)。因为我用作元素符号的图标是自定义的，所以文本环绕它。相反，我希望文本稍微缩进，这样它就不会像普通元素符号那样换行。

非常感谢

托马斯

<div class="services-threefold-solutions ">
        <div class="container-fluid showcase-panel-dark">
              <div class="row">
                  <div class="col-md-6">
                      <h2>Threefold solutions.</h2>
                        <p >As a <strong>developer</strong>, <strong>SEO technician</strong> and <strong>data engineer</strong>, I wear a lot of hats! You can combine services across my <a href="{{ site.baseurl }}/expertise">areas of expertise</a> into a single package that would otherwise require expensive agency retainers or several freelancers. </p>
                        <p>Most SEOs are not developers and data specialists. Most developers are not well versed in SEO. In contrast, <strong>I am able to diagnose technical problems and implement their solution.</strong></p>
                        <p>Even if your solution sits squarely within a single service line, my integrated skillset means:</p>
                          <ul class="showcase-bullets pl-0">
                            <li > <ion-icon name="checkmark-circle-outline"></ion-icon> development work will always embody SEO best practices</li>
                            <li> <ion-icon name="checkmark-circle-outline"></ion-icon> SEO consultancy includes careful consideration of the most effective development methods </li>
                            <li> <ion-icon name="checkmark-circle-outline"></ion-icon> every service has tracking and analytics at the forefront, promoting accountability and empowering you to chart subsequent performance and growth </li>
                          </ul>
                    </div>
                  <div class="col-md-6">
                    <!--Image goes here-->
                  </div>
              </div>
        </div>
    </div>

2

Answer 1

我更喜欢做的是在图标后面包裹文本并使用这个小 float 技巧

<ul>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa <br/> aksjdfkasjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
</ul>


i {
  float: left;
}

span {
  display: block;
  padding-left: 120px; // width of the icon
}

https://jsfiddle.net/aq9Laaew/290997/