字体真棒图标下拉

我正在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>

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

来源

2017-07-03 Ayhem

'我tried' - 显示你已经尝试什么：对 –

我试着用选择选项，这样'<选择类= “表单控制” NAME = “类别” > <选项值= “”> <选项值= “”> <选项值= “”> ' – Ayhem

问题是，HTML规范说'

你试过这个解决方案：https://stackoverflow.com/a/41508095/6638533

因此，基本上，他把“宋体”和“FontAwesome”作为字体家族中的“选择”标签的样式，然后使用Unicode而不是HTML标记在“选项”标签：

<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。

----------------------------- UPDATE --------------- ---------

如果你想这样的解决方案：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>

然后，您可以通过加入“所选文字”和“我的-icon-使用选择'作为你的HTML元素的ID：

<div id="my-icon-select"></div> 

<input type="text" id="selected-text" name="selected-text" style="width:65px;">

PS该库在.zip文件中包含四个示例。您可以运行这些代码并查看源代码以获得更好的理解。

来源

2017-07-03 04:33:18 samAlvin

现在图标出现，但它们很小而且很黑。我想要这样的东西，但与fontawesome图标：https：//stackoverflow.com/a/20775713/5823056（我是你提供它的链接的答案）。我undrestand在这个例子中的JavaScript代码，但我怎样才能使用它并将其添加到我的表单。谢谢 – Ayhem

@Ayhem我更新了答案 – samAlvin

非常感谢您的帮助 – Ayhem

i { 
 
    color: black; 
 
}

<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>

来源

2017-07-03 04:42:42 terryeah

字体真棒图标下拉

回答

相关问题