<分区>
标签 html css html-lists
<分区>
我想更改 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>最佳答案
你的语法错误:
这会起作用:
.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 预处理器。
关于html - 将 li 图标更改为 font awesome 图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58214676/