Html 中的图标选择选项答案

【问题标题】：Icons in Html Select OptionsHtml 中的图标选择选项
【发布时间】：2020-09-09 13:32:53
【问题描述】：

我现在尝试了很多，但我无法解决它。我会按照这里描述的方式尝试：font awesome icon in select option

我想在我的选择中为一些选项添加一些很棒的字体图标，我知道你不能在选项中添加一个，但我读到有可能使用 unicode：

https://fontawesome.com/icons/sort-up 这是我想与 unicode 一起使用的图标之一：f0de，我像这样插入它没有效果我错过了什么？

<div class="sort_filter_container">
            <div class="form-group">
                <form name="view_type_sorting" class="form-group" action="" method="get">
                    <span><b>[{oxmultilang ident="SORT_VIEW"}]: </b></span>
                    <select style="text-align-last: center;font-weight: 600;margin-right: 0;vertical-align: text-bottom;" id="view_type_sorting" aria-haspopup="true" aria-expanded="false" onchange="this.form.submit()" name="view_type_sorting">
                        <option id="list_asc_price" name="list_asc_price" value="list_asc_price">[{oxmultilang ident="PRICE_UP"}] &#xf09b;</option>
                        <option id="list_desc_price" name="list_desc_price" value="list_desc_price">[{oxmultilang ident="PRICE_DOWN"}]</option>
                        <option id="list_asc_alpha" name="list_asc_alpha" value="list_asc_alpha">[{oxmultilang ident="NAME_UP"}]</option>
                        <option id="list_desc_alpha" name="list_desc_alpha" value="list_desc_alpha">[{oxmultilang ident="NAME_DOWN"}]</option>
                        <option id="list_default" name="list_default" value="list_default">[{oxmultilang ident="DEFAULT_GRID"}]</option>
                    </select>
                </form>
            </div>
        </div>

【问题讨论】：

标签： html css responsive-design font-awesome

【解决方案1】：

我使用 Fontawesome version 4.7.0

将字体系列添加到#view_type_sorting

#view_type_sorting{
  font-family:"FontAwesome";
}

#view_type_sorting{
  font-family:"FontAwesome";
  font-size:14px;
}
#view_type_sorting::before{
  vertical-align:middle;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sort_filter_container">
    <div class="form-group">
        <form name="view_type_sorting" class="form-group">
            <select style="text-align-last: center;font-weight: 600;margin-right: 0;vertical-align: text-bottom;" id="view_type_sorting" aria-haspopup="true" aria-expanded="false" name="view_type_sorting">
                <option id="list_asc_price" name="list_asc_price" value="list_asc_price"> Github &#xf09b; </option>
                <option id="list_desc_price" name="list_desc_price" value="list_desc_price"> GitLab &#xf296; </option>
                <option id="list_asc_alpha" name="list_asc_alpha" value="list_asc_alpha"> Whatsapp &#xf232;</option>
                <option id="list_desc_alpha" name="list_desc_alpha" value="list_desc_alpha"> Google Plus &#xf0d5; </option>
                <option id="list_default" name="list_default" value="list_default"> Facebook &#xf082; </option>
            </select>
        </form>
    </div>
</div>

【讨论】：

有没有办法改变图标的高度？
您可以尝试更改字体大小吗？而不是图标高度。
不，我现在尝试更改 id #view_type_sorting 中的字体大小，但我无法将它放在中心，我也尝试垂直对齐但没有效果。我会想办法解决的谢谢
你想要多少字体大小？
我的字体大小为 14px，我想尝试获取 与文字在一行中

【解决方案2】：

您可以使用fontawesome 并执行以下操作：

<div class="font-awesome">
<label>Font Awesome</label>
<select class="fa">
    <option value="">Select</option>
    <option class="fa" selected>Hi i am &#xf2b9 fontawesome</option>
    <option class="fa">Hi i am &#xf30b fontawesome</option>
    <option class="fa">Hi i am &#xf0f3 fontawesome</option>
    <option class="fa">Hi i am &#xf273 fontawesome</option>
    <option class="fa">Hi i am &#xf080 fontawesome</option>
</select>

.font-awesome .fa {
    font-family: "Font Awesome 5 Free", Open Sans;
    font-weight: 501;
}

Example

【讨论】：