gpt4 book ai didi

javascript - Font Awesome 图标下拉

转载 作者:可可西里 更新时间:2023-11-01 12:58:42 29 4
gpt4 key购买 nike

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

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

最佳答案

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

基本上,他将“Arial”和“FontAwesome”作为“select”标签样式中的字体系列,然后在“option”标签中使用 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 .

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

如果您想要这种解决方案: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>

然后您可以通过添加“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;">

附言该库在 .zip 文件中包含四个示例。您可以运行它们并查看源代码以更好地理解。

关于javascript - Font Awesome 图标下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44877565/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com