是否可以将自定义图标添加到 Bootstrap 4 选项卡？答案

【问题标题】：Is it possible to add custom icons to Bootstrap 4 tabs?是否可以将自定义图标添加到 Bootstrap 4 选项卡？
【发布时间】：2017-12-05 09:50:11
【问题描述】：

是否可以将自定义图标添加到 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;
}

【问题讨论】：

标签： sass icons bootstrap-4

【解决方案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

【讨论】：