将文本对齐到字体真棒图标

Question

我正在尝试将FontAwesome图标旁边的文本垂直对齐。 我可以用左填充手动进行操作，但这似乎是错误的。

有没有更简单的方法可以做到这一点？

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

最好的祝福。

Answer 1

您应该进行以下修改：

• 在儿童ul S的关系是li s到有一个正确的HTML，
• 使用fa-fw将图标设置为固定宽度，
• 删除不再需要的br ，

然后，您可以在li i元素上使用margin-right来在图标和文本之间增加一些间距。

 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轻松替换默认项目符号，
• 无需样式化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> 

⋅⋅⋅

有关更多信息，请参见 “ 字体真棒示例 ”。

Answer 2

将fa-fw添加到班级列表（设置固定宽度的图标）

文件： https : //fontawesome.com/v4.7.0/examples/#fixed-width或https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Answer 3

检查我的代码：

 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>