javascript - 在跨度类上显示图标

我试图在Firstname之后显示图标，并且将icon放在类似位置，但在@ item.Firstname中不显示图标？

i.fa.fa.fa-heart {
        visibility:visible;
        height:25px;
        width:10%;
        }

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<td>@item.Firstname<span><i class="fa fa-heart" title="Arbitration"></i></span>
</td> 

Button.OnCLick功能

$(".town").click(function () {
    $.getJSON("/NfDocuments/LoadMedicalProviders", { town: $(this).attr('data-town') },
        function (data) {
            $('#medProviders').empty();
            var p = 0;
            $.each(data, function () {
                $("#medProviders").append("<tr class='sortList' style='cursor:pointer' id='increment-" + p + "' data-id='" + this.Id + "'  data-lat='" + this.Lat + "' data-long='" + this.Lon + "'><td>" + this.Title + "<span class='glyphicon glyphicon-heart'></span></td></td> <td id='distance-" + p + "'><br/></td><td id='duration-" + p + "'></td></tr>");
                p++;
            });
        });
});

最佳答案

如果您加载了font-awesome.min.css，那么您的代码将起作用。如下：

 #mapedit { width: 100%; height: 400px; }

i.fa.fa.fa-heart {
  visibility: visible;
  height: 25px;
  width: 10%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<td>@item.Firstname<span><i class="fa fa-heart" title="Arbitration"></i></span>
</td>

<td tabindex="0" class="sorting_1">Michel Width, Doctor<span><i class="fa fa-heart" title="Arbitration"></i></span>
</td>