是否可以向Bootstrap 4标签添加自定义图标？

Question

是否可以在Bootstrap 4选项卡中添加自定义图标？当我尝试使用以下代码时，图标无法显示。有什么问题？

HTML

        <ul class="nav nav-tabs navbar-light bg-light" id="leftTabs" role="tablist">
            <li class="nav-item nav-link active" id="nav-leftDefault-tab" data-toggle="tab"
               href="#nav-leftDefault"
               role="tab" aria-controls="tabA1" aria-selected="true"><span class="listicon"></span></li></ul>

SCSS：

$listico: ("images/icons/list.png");

.listicon{
  background-image: $listico;
}

Answer 1

您需要使用有效值正确使用background-image属性。在这种情况下，您要使用url()

$listico: url("images/icons/list.png");

.listicon{
  background-image: $listico;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image