gpt4 book ai didi

html - 选择选项中的 Font Awesome 图标

转载 作者:技术小花猫 更新时间:2023-10-29 11:44:07 27 4
gpt4 key购买 nike

我尝试在几个选项的第一个选择中添加一个插入符号向下图标,如下图所示:

enter image description here

这是一个Fiddle以我为例。

我无法让图标在上面的 fiddle 上可见。

以及对应的代码:

.wrapper {
height: 200px;
background-color: red;
padding-top: 100px;
padding-left: 150px;
}
#before-select {
font-size: 30px;
color: #ffffff;
}
select {
border: none;
background: transparent;
/*background-color: blue;*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 180px;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
}
select option {
color: #424146;
background: #ffffff;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="wrapper">

<form role="form">
<span id="before-select">in</span>

<select name="town">
<option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>
</option>
<option value="Paris">Paris</option>
<option value="Madrid">Madrid</option>
</select>


</form>


</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

最佳答案

您可以简单地将 FontAwesome 图标作为文本添加到您的选择下拉列表中。你只需要 CSS 中的一些东西,FontAwesome CSS 和 unicode。例如:

select {
font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, &#xf042;</option>
<option>Hi, &#xf043;</option>
<option>Hi, &#xf044;</option>
<option>Hi, &#xf045;</option>
<option>Hi, &#xf046;</option>
</select>

Working fiddle

当你点击一个图标时可以找到Unicode:Fontawesome

According to the comment below and issue on Github, the Unicode in select elements won't work on OSX (yet).


更新:来自Github issue , 添加 multiple select 元素的属性使其适用于:

OSX El Capitan 10.11.4

  • Chrome 版本 50.0.2661.75(64 位)
  • Safari 9.1 版
  • Firefox 版本 45.0.2

select{
font-family: FontAwesome, sans-serif;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select multiple>
<option>&#xf26e 500px</option>
<option>&#xf042 Adjust</option>
<option>&#xf170 Adn</option>
<option>&#xf037 Align-center</option>
<option>&#xf039 Align-justify</option>
<option>&#xf036 Align-left</option>
<option>&#xf038 Align-right</option>
</select>

JSFiddle

关于html - 选择选项中的 Font Awesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36743041/

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