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

否则，您将需要像sass或更少的css预处理器。

将li图标更改为字体真棒图标

1 个答案: