Question

我正在研究symfony项目，我想在表单中添加下拉列表。下拉列表应仅包含没有任何文本的图标。我尝试使用这样的选项：

<select class="form-control" name="category">
    <option value="">
        <a class="category-icon icon-bed"></a>
    </option>
    <option value="">
        <i class="fa fa-wrench fa-fw"></i>
    </option>
    <option value="">
        <i class="fa fa-wrench fa-fw"></i>
    </option>
</select>

但它没有显示任何图标。我怎样才能做到这一点？感谢

Answer 1

您是否尝试过此解决方案：https://stackoverflow.com/a/41508095/6638533

所以基本上，他把＆＃34; Arial＆＃34;和＃34; FontAwesome＆＃34;作为＆＃34;中的字体系列，选择＆＃34;标记的样式，然后在＆＃34;选项中使用unicode而不是HTML标记＆＃34;标记：

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
    <option value=''>&#xf039; &nbsp; All States</option>
    <option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
    <option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
    <option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

可以找到fontAwesome unicode的列表here。

-----------------------------更新-------------- ----------

如果您需要这种解决方案：https://stackoverflow.com/a/20775713/6638533，

首先从the site下载库。解压缩，然后将文件夹复制到项目中。然后在html文件中导入库：

<link rel="stylesheet" type="text/css" href="{yourPath}/css/lib/control/iconselect.css" > <script type="text/javascript" src="{yourPath}/lib/control/iconselect.js"></script> <script type="text/javascript" src="{yourPath}/lib/iscroll.js"></script>

之后你提出了上面提到的脚本：

<script> var iconSelect; var selectedText; window.onload = function(){ selectedText = document.getElementById('selected-text'); document.getElementById('my-icon-select').addEventListener('changed', function(e){ selectedText.value = iconSelect.getSelectedValue(); }); iconSelect = new IconSelect("my-icon-select"); var icons = []; icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'}); icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'}); icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'}); icons.push({'iconFilePath':'images/icons/4.png', 'iconValue':'4'}); icons.push({'iconFilePath':'images/icons/5.png', 'iconValue':'5'}); icons.push({'iconFilePath':'images/icons/6.png', 'iconValue':'6'}); icons.push({'iconFilePath':'images/icons/7.png', 'iconValue':'7'}); icons.push({'iconFilePath':'images/icons/8.png', 'iconValue':'8'}); icons.push({'iconFilePath':'images/icons/9.png', 'iconValue':'9'}); icons.push({'iconFilePath':'images/icons/10.png', 'iconValue':'10'}); icons.push({'iconFilePath':'images/icons/11.png', 'iconValue':'11'}); icons.push({'iconFilePath':'images/icons/12.png', 'iconValue':'12'}); icons.push({'iconFilePath':'images/icons/13.png', 'iconValue':'13'}); icons.push({'iconFilePath':'images/icons/14.png', 'iconValue':'14'}); iconSelect.refresh(icons); }; </script>

然后，您可以通过添加＆＃39; selected-text＆＃39;和＆＃39; my-icon-select＆＃39;作为你的html元素的id：

<div id="my-icon-select"></div> <input type="text" id="selected-text" name="selected-text" style="width:65px;">

<强> P.S。该库包含.zip文件中的四个示例。您可以运行这些内容并查看源代码以便更好地理解。

Answer 2

＆＃13;

i {
  color: black;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i></a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i></a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i></a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i></a></li>
</ul>

＆＃13;

Font Awesome图标下拉列表

2 个答案: