Jquery CSS:ui小部件标题内的ui图标不继承颜色

我正在尝试使用jQueryUI类创建列表

问题是

<span class="ui-corner-all ui-icon ui-icon-plus"></span>

JSFIDDLE:

<span class="ui-corner-all ui-icon ui-icon-plus"></span>

CSS:

.ui-splitselect{font-size:.8em}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect div.list-selected{float:left;border:none;margin:0;padding:0}
.ui-splitselect div.list-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect ul.list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;margin:0;padding:0}
.ui-splitselect li{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect li .handle-select{float:left}
.ui-splitselect li .handle-drag{float:left;height:20px;border-top:0;border-bottom:0;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect li .handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}
.ui-splitselect li.ui-state-focus .handle-drag,.ui-splitselect li.ui-state-focus .handle-move{border:inherit;border-top:0;border-bottom:0}
.ui-splitselect .ui-widget-header{border:none;font-size:11px}

<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content">
    <div class="ui-widget-content list-available" style="width: 200px;">
        <ul class="list available" style=" ">
            <li class="ui-state-default">
                <div class='handle-drag ui-widget-header'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
                <span class="handle-select">Espania</span>
                                <a class="handle-move ui-widget-header" href="#"><span class="ui-icon ui-icon-plus"></span></a>
            </li>
        </ul>
    </div>
</div>

HTML:

.ui-splitselect{font-size:.8em}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect div.list-selected{float:left;border:none;margin:0;padding:0}
.ui-splitselect div.list-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect ul.list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;margin:0;padding:0}
.ui-splitselect li{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect li .handle-select{float:left}
.ui-splitselect li .handle-drag{float:left;height:20px;border-top:0;border-bottom:0;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect li .handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}
.ui-splitselect li.ui-state-focus .handle-drag,.ui-splitselect li.ui-state-focus .handle-move{border:inherit;border-top:0;border-bottom:0}
.ui-splitselect .ui-widget-header{border:none;font-size:11px}

<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content">
    <div class="ui-widget-content list-available" style="width: 200px;">
        <ul class="list available" style=" ">
            <li class="ui-state-default">
                <div class='handle-drag ui-widget-header'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
                <span class="handle-select">Espania</span>
                                <a class="handle-move ui-widget-header" href="#"><span class="ui-icon ui-icon-plus"></span></a>
            </li>
        </ul>
    </div>
</div>

埃斯帕尼亚

要更改的颜色是什么？背景还是图标？如果是图标，那么您需要指定一个不同的图像文件，因为上面的所有图标都是蓝色的……或者您可以使用图标字体，如果您可以找到一个带有所需符号的字体。。。