asp.net mvc - Bootstrap glyphicon not showing in Form

Question

I'm trying out different ways to do a form with a confirm. I have the following in form as well as just a hyperlink. The hyperlink below is displaying the glyphicon correctly but the submit button inside the form is just displaying as "submit" in a gray button. Does the CSS need to be different in the submit button vs a hyperlink?

<div class="text-center">
    @using (Html.BeginForm("Delete", "Patrol", new { id = item.MemberId }))
    {
        @Html.AntiForgeryToken()
        <input type="submit" class="glyphicon glyphicon-trash" onclick="return confirm('Are you sure you want to remove this record?')" />
    }

    <a href="@Url.Action("Delete", new {id = item.MemberId})" onclick="return confirm('Are you sure you want to remove this record?')"><span class="glyphicon glyphicon-trash"></span></a>
</div>

Answer 1

Using Firebug or another debugger, find the css file in which the glyphicon is defined. In this css file check the src location at @font-face section. You might need to make some changes (i.e. adding or removing ' ../ ') in the src section according to your glyphicons location in your project as shown below:

src: url('../fonts/glyphicons-halflings-regular.eot');

or

src: url('../../fonts/glyphicons-halflings-regular.eot');

On the other hand, if some of the application files are not displayed after publishing it to the server, you might need to apply the following changes regarding to file path:

from

~/../../Content/images/img.png

to

./../../Content/images/img.png

And under Properties window of the related files, check if the properties set for them as shown below:

Build Action : Content
Copy to Output Directory: Do not copy

Hope this helps...