字体图标下拉菜单

Question

字体图标下拉菜单

6

我正在开发Symfony项目，想要在表单中添加下拉菜单。该下拉菜单应只包含图标而不含任何文本。我尝试使用以下select选项：

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

但是它没有显示任何图标。我该怎么办？谢谢。

- Ayhem

1

我尝试过 - 告诉我你尝试了什么 :p - Jaromanda X

1

我尝试使用选择选项，像这样

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

- Ayhem

问题是，HTML规范规定<option>内容只能是文本，不能包含HTML代码。 - Jaromanda X

老实说，我不知道那个。谢谢。 - Ayhem

1

可能是如何在Symfony表单选择器中显示字体惊人图标的重复问题。 - Amaan Iqbal

显示剩余4条评论

2个回答

-1

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>

- terryeah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- samAlvin · Accepted Answer

你尝试过这个解决方案吗：https://dev59.com/nHA85IYBdhLWcg3wCfHm#41508095 基本上，他将“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列表：这里。 ----------------------------- 更新 ------------------------ 如果您需要此类解决方案：https://dev59.com/nHA85IYBdhLWcg3wCfHm#20775713，

首先，您需要从该网站下载库。解压缩并将文件夹复制到您的项目中。然后在您的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;">

P.S. 这个库包括一个 .zip 文件里的四个示例。您可以运行这些示例并查看源代码，以便更好地理解。