在跨度类上显示图标

时间:2018-08-08 12:12:18

标签: javascript html css

我正在尝试在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++;
            });
        });
});

2 个答案:

答案 0 :(得分:0)

<span>@(item.Firstname)</span><span class="glyphicon glyphicon-heart"></span>尝试这个。

答案 1 :(得分:0)

如果您加载了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>