Change li icon to font awesome icon

Question

I want to change a li icon but this attempt it doesn't working.

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

Customer support Shipping General sales terms and conditions How to send order About pricing How to request free sample

I was edited your code. It should work. – Ngorld Oct 03 '19 at 08:12 — Ngorld, Oct 03 '19 at 08:12
Have you imported the right files from the CDN? – Winston Jude Oct 03 '19 at 08:19 — Winston Jude, Oct 03 '19 at 08:19

score 0 · Accepted Answer · answered Oct 03 '19 at 08:14

you syntax is wrong:

this will work:

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

Otherwise you would need a css-preprocessor like sass or less.

Change li icon to font awesome icon

1 Answers1