Jquery 选择下拉列表（并动态加载标签值）后，图标消失

我在HTML中向文本值添加一个图标。问题是它被应用于引导按钮。选择该下拉列表后，它将从外部源获取一个值，并且按钮标签将更改。当它接受此值时，内部的文本将发生变化，因此不再包含图标。我试图通过一个类将其添加到div中，但这会永久更改文本类型，我不想这样做。有什么想法吗

  <div class="col-2" style="padding: 20px;">
            <div class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="acctFilter" data-toggle="dropdown" acctid="placeholder">
                <i class="fa fa-building"></i>&nbsp; SELECT ACCOUNT
                <span class="sr-only">Toggle Dropdown</span>
            </div>
            <div class="dropdown-menu" id="acctList" role="menu" aria-labelledby="dropdownMenu">
            </div>
        </div>

选择帐户
切换下拉列表

如果我像这样添加它，整个按钮文本会改变

  <div class="col-2" style="padding: 20px;">
            <div class="btn btn-primary dropdown-toggle dropdown-toggle-split fa fa-globe" id="acctFilter" data-toggle="dropdown" acctid="placeholder">
               SELECT ACCOUNT
                <span class="sr-only">Toggle Dropdown</span>
            </div>
            <div class="dropdown-menu" id="acctList" role="menu" aria-labelledby="dropdownMenu">
            </div>
        </div>

选择帐户
切换下拉列表

您可以创建自定义css类来解决此问题，如下面的代码片段所示

从技术上讲，您可以将这一小块自定义css添加到现有的类中。但最好保持干净

：：before

伪类有一个

content

属性，允许您指定所需的图标/内容。通过搜索此文件中的图标名称，可以找到该片段的代码：

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

和

右键填充

允许您指定图标和文本之间所需的间距

单击下面的“运行代码片段”进行实时测试：

.icon building:：之前{
字体系列：“FontAwesome”；
内容：“\f1ad”；
右边填充：10px；
}
选择帐户
切换下拉列表

我不确定自己是否完全理解，但我假设您拥有处理单击下拉列表的代码。在该代码中，您正在更改文本。在没有看到代码的情况下，我唯一的建议是将按钮的文本包装在一个span中，添加一个类以便从代码中轻松选择，然后只更改span的文本。因此，html看起来像：

选择帐户
切换下拉列表