[英]Font Awesome icons dropdown
I am working on symfony project and I want to add dropdown to a form. 我正在研究symfony项目,我想在表单中添加下拉列表。 The dropdown should contain only icons without any text. 下拉列表应仅包含没有任何文本的图标。 I tried using select option like this: 我尝试使用这样的选项:
<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>
But it doesn't show any icon. 但它没有显示任何图标。 How can i do that? 我怎样才能做到这一点? Thanks 谢谢
Have you tried this solution: https://stackoverflow.com/a/41508095/6638533 您是否尝试过此解决方案: https : //stackoverflow.com/a/41508095/6638533
So basically, he put the "Arial" and "FontAwesome" as the font-family in the "select" tag's style, and then using the unicode instead of HTML markup in the "option" tag: 基本上,他将“Arial”和“FontAwesome”作为“select”标签样式中的font-family,然后在“option”标签中使用unicode而不是HTML标记:
<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''> All States</option>
<option value='enabled' style='color:green;'> Enabled</option>
<option value='paused' style='color:orange;'> Paused</option>
<option value='archived' style='color:red;'> Archived</option>
</select>
The list of the fontAwesome unicode can be found here . 可以在此处找到fontAwesome unicode的列表。
----------------------------- UPDATE ------------------------ -----------------------------更新-------------------- ----
If you want this kind of solution: https://stackoverflow.com/a/20775713/6638533 , 如果您需要这种解决方案: https : //stackoverflow.com/a/20775713/6638533 ,
First you download the library from the site . 首先从站点下载库。 Extract it, and copy the folder to your project. 解压缩,然后将文件夹复制到项目中。 Then you import the library in your html file: 然后在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>
After that you put the mentioned 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>
You can then use it by adding 'selected-text' and 'my-icon-select' as the id of your html element: 然后,您可以通过添加“selected-text”和“my-icon-select”作为html元素的id来使用它:
<div id="my-icon-select"></div>
<input type="text" id="selected-text" name="selected-text" style="width:65px;">
PS The library includes four examples in the .zip file. PS该库包含.zip文件中的四个示例。 You can run those and see the source code for better understanding. 您可以运行它们并查看源代码以便更好地理解。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.