如何在选择选项标签中显示图标

新手上路,请多包涵

需要在选择选项标签中显示 Font Awesome?

如果我在外面使用它的工作 <i class="fas fa-chart-pie"></i> 但是如果文本我怎么能在标签中显示它呢

<select id="select_graphtype">
  <option value="line_graph"> Line Graph</option>
  <option value="pie_chart"> Pie Chart</option>
</select>

你能帮帮我吗?

原文由 Jhansi Pasupuleti 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 337
2 个回答

您不能在 (option tag) 内部使用 (icon tag),但您可以使用不同的方式,例如在 select 中使用 class=‘fa’,在选项值中使用 icon classes。它在我的案例中完全有效。

 <select id="select_graphtype" class="fa">
    <option value="fa fa-address-card"> &#xf2bb; line chart</option>
    <option value="fa fa-address-card"> &#xf2bb; Pie Chart</option>
</select>

如果这不起作用,请确保这一点

.fa option {

    font-weight: 900;
}

希望这对你有帮助。更好的是,我建议您在 此链接中使用前端框架 Materialize CSS select。 .我一直在将它用于我的前端工作。

图片对我有用

原文由 Mobasshir Bhuiya 发布,翻译遵循 CC BY-SA 4.0 许可协议

试试这个:

 @font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
    font-family: FontAwesome;
}
 <select id="select_graphtype">
    <option value="line_graph"> &#xf2bb; Line Graph</option>
    <option value="pie_chart"> &#xf2bb; Pie Chart</option>
</select>

原文由 Partho63 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题