Как сделать отступ для текста, чтобы избежать наложения значка? - PullRequest
Новая
       50

Как сделать отступ для текста, чтобы избежать наложения значка?

0 голосов
/ 12 декабря 2018

enter image description here Я использую значки 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

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Что я предпочитаю делать, так это оборачивать текст после иконки и использовать этот маленький трюк с плавающей точкой 

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

0 голосов
/ 12 декабря 2018

Вы можете создать левое поле на UL и сделать его position:relative.Затем установите абсолютные значки над левым полем ... 

.showcase-bullets li {
    margin-left: 20px;
    position: relative;
}

.ion {
    left: -20px;
    position: absolute;
    text-align: center;
    width: 11px;
    line-height: inherit;
}

Демонстрация

Вы можете отрегулировать левое поле и ширину так, как считаете нужным, и естьнет необходимости реструктурировать HTML.

...