Выровнять текст по значку шрифта - PullRequest
Новая
       6

Выровнять текст по значку шрифта

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

Я пытаюсь выровнять текст по вертикали рядом со значками FontAwesome.Я могу сделать это вручную с отступом влево, но это кажется неправильным.

Есть ли более простой способ сделать это?

Demo

<div class="row">
<div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
        <div class="col-xs-12 col-sm-6">
            <ul>
                <i class="fas fa-snowflake"></i> A/C service<br/>
                <i class="fa fa-angle-right"></i> Aut-gear service<br/>
                <i class="fas fa-car-side"></i> Bil-leasing<br/>
                <i class="fas fa-car"></i> Bil-salg<br/>
                <i class="fas fa-oil-can"></i> Bilsyn<br/>
                <i class="fa fa-angle-right"></i> BMW Keyreader<br/>
                <i class="fa fa-angle-right"></i> BMW-testudstyr (ISTA)<br/>
                <i class="fas fa-book"></i> Digital servicebog<br/>
                <i class="fas fa-hotel"></i> Dækhotel<br/>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6">
            <ul>
                <i class="fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding<br/>
                <i class="fa fa-angle-right"></i> Klassiske biler<br/>
                <i class="fas fa-mug-hot"></i> Kundelounge<br/>
                <i class="fa fa-angle-right"></i> Låne/leje-biler<br/>
                <i class="fa fa-angle-right"></i> Skade-reparation<br/>
                <i class="fas fa-code"></i> Software-opdatering & kodning<br/>
                <i class="fas fa-tools"></i> Specialværktøj<br/>
            </ul>
        </div>
    </div>      
</div>

С уважением.

Ответы [ 3 ]

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

Вы должны сделать следующие изменения:

  • Для детей в ul s должно быть li s, чтобы иметь правильный HTML,
  • Используйте fa-fw для установки значковна фиксированной ширине
  • Удалите br s, которые больше не нужны,

Затем вы можете использовать margin-right на элементах li i, чтобы добавить ещерасстояние между значками и текстом. 

ul {
  /* Remove the ul default styling */
  list-style: none;
}

li i {
  margin-right: 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

⋅ ⋅ ⋅

Если вам не нужно добавлять пробел между значками списка и текстом, вы также должны выполнитьследующие:

  • Используйте fa-ul и fa-li s для простой замены маркеров по умолчанию,
  • Нет необходимости стилизовать ul или li. 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-li fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-li fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-li fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-li fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-li fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-li fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-li fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-li fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

⋅ ⋅ ⋅

Проверьте Примеры потрясающих шрифтов для получения дополнительной информации.

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

Проверьте мой код: 

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul>li {
  position: relative;
  padding-left: 40px;
}

ul>li>[class*="fa"] {
  position: absolute;
  top: 0;
  left: 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-fw fas fa-code"></i> Software-opdatering & kodning Software-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering
            & kodningSoftware-opdatering & kodning</li>
          <li><i class="fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>
0 голосов
/ 19 декабря 2018

Добавить fa-fw в список классов (который устанавливает значки фиксированной ширины)

Документы: https://fontawesome.com/v4.7.0/examples/#fixed-width или https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

...