时间戳

首页 > 解决方案 > 如何从选项中选择字体真棒图标

jquery - 如何从选项中选择字体真棒图标

问题描述

<select id="dropdown">
    <option> <i class="fa fa-wifi"></i> </option>
    <option> <i class="fa fa-battery-full"></i> </option>
</select>
<div id="feedback"></div>

When any one of the option is selected, how can I show the selected font awesome icon in feedback div using jQuery.

标签： jqueryhtml

解决方案

https://jsfiddle.net/r62p5zas/ 示例代码在这里 在html部分中，您需要使用字体真棒集成和更改选择的字体，然后您可以在选择项中显示图标

select{
        font-family: fontAwesome
    }

之后，您可以为您的选择提供 onchange 事件并将值作为字体名称，您需要在选项中编写字体代码。

<select id="dropdown" onchange="chantestge()">

    <option value='fa-wifi'>&#xf1eb; Wifi</option>
     <option value='fa-battery-full'>&#xf240; Battery</option>
</select>
<div id="feedback"></div>

然后是 js 部分，您可以使用 jquery 并使用 html 代码将结果与创建图标

function chantestge(){

  $("#feedback").html("<i class='fa "+$("#dropdown").val()+"'></i>");
}

推荐阅读