将li图标更改为真棒图标

Question

我想更改li图标，但此尝试不起作用。

.ul_settlement{

    

    margin-left: 20px;
    .li_settlement{
    padding-top: 15px;
    font-family: $footer-mid-text-font-family;
    font-size: $footer-mid-text-font-size;
    
   
    
        &::before {
        content: "\f054"; /* FontAwesome Unicode */
        font-family: 'Font Awesome 5 Free';
        display: inline-block;
        margin-left: -1.3em; /* same as padding-left set on li */
        width: 1.3em; /* same as padding-left set on li */
        font-weight: 900;
         }
    }
}

<ul class="col-2 ul_settlement">

    <h1 class="pack_channel_title">Customer support</h1>
    
    <li class="li_settlement"> <a href="#">Shipping</a> </li>
    <li class="li_settlement"><a href="#">General sales terms and conditions</a></li>
    <li class="li_settlement"><a href="#">How to send order</a></li>
    <li class="li_settlement"><a href="#">About pricing</a></li>
    <li class="li_settlement"><a href="#">How to request free sample</a></li>
    
</ul>

客户支持运输一般销售条款和条件如何发送订单关于定价如何索取免费样品

Answer 1

您的句法是错误的：

这将起作用：

.ul_settlement {
    margin-left: 20px;
}

.ul_settlement .li_settlement {
    padding-top: 15px;
    font-family: $footer-mid-text-font-family;
    font-size: $footer-mid-text-font-size;
}

.ul_settlement .li_settlement::before {
    content: "\f054"; /* FontAwesome Unicode */
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    margin-left: -1.3em; /* same as padding-left set on li */
    width: 1.3em; /* same as padding-left set on li */
    font-weight: 900;
}