我正在尝试将图标字体(特别是Icomoon)添加到像AdSense在其顶部搜索菜单中的HTML选择下拉列表中。
<div class="top-middle">
<div class="sb-search">
<form action="/search.php" class="search-wrapper cf" method="post">
<select name="scope">
<option value="">All</option>
<option class="icon icon-search" value="1">Option 1</option>
<option value="2"><i class="icon icon-search"></i>Option 2</option>
</select>
<input type="text" name="search-box">
<button type="submit" name="top-search"><i class="icon icon-search"></i></button>
</form>
</div>
</div>
我尝试过只使用选项中的字体图标代码,但它不起作用:
<option value="1"><i class="icon icon-search"></i> Search</option>
还尝试在选项本身中添加一个类无效:
<option value="1" class="icon icon-search"> Search</option>
有谁知道如何做到这一点?
答案 0 :(得分:4)
以下是我使用Font Awesome进行此操作的方法,希望这与您正在使用的图标字体类似。
基本上,您必须使用图标字体设置选择的第一个字体,然后将第二个字体设置为您打算用于正常字词的字体,如此
<select style="font-family: 'FontAwesome', 'Open Sans';">
然后在选项组标签或任何选项的内容中,使用图标字符的Unicode值,如下所示
<select style="font-family: 'FontAwesome', 'Open Sans';">
<optgroup label=" Option Group Name">
<option value="value" > Option Name</option>
</optgroup>
</select>
您可以在代码
中查找这些字符<i class="fa fa-buysellads"></i>
使用chrome之类的工具通过开发工具获取Unicode值
迟到了,但希望有所帮助!