如何使用Bootstrap和Font Awesome在下拉菜单中使用图标

Question

我想要一个下拉菜单，我可以在其中选择国家/地区名称，在下拉菜单中我还想要各个国家/地区的标志图标。例如，将印度列为印度国旗。

<div class="ui-widget2">
    <span>
        <input id="inputbox" placeholder="Country Name" type="text" 
            class="countries" style="width:15%;">
    </span> 
</div>

Answer 1

使用此代码。此代码使用bootstrap

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Country
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#"><img src="india.jpg" />India</a></li>
    </ul>
</div>

Answer 2

这是一个很好的bootstrap插件
http://bootstrapformhelpers.com/country/#.Um1EhhD9WcY