MVC replacing Edit/Details/Delete with Icons

Question

I want to replace those three fields Edit/Details/Delete with icons I just downloaded. The icons are with size 512x512, will this be a problem? Can I resize them in the code (how), or I should resize them using some program. I've been searching through the net and I found some very long pieces of C# code but I have no idea where to put it in order to replace the text of those properties with the icons.

Here is my HTML:

@using PagedList.Mvc;
@model PagedList.IPagedList<Rating_System.Models.tblTeacher>
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
@{
    ViewBag.Title = "Teachers List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Teachers</h2>    
<p>
    @Html.ActionLink("Add new", "Create")
</p>
@using (Html.BeginForm("Index", "Teachers", FormMethod.Get))
{

<p>
   Търсене: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
    <input type="submit" value="Search" />
</p>
}
<table class="table">    
    <tr>
        <th>                
        </th>
        <th>  
            @Html.DisplayNameFor(model => model.First().FirstName)      
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().SecondName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().Title)
        </th>                      
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <img src="@Url.Action("GetImage", "Teachers", new {item.ID})" width="45" height="45" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SecondName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>              
            <td>
                @Html.ActionLink("Редактирай", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Детайли", "Details", new { id = item.ID }) |
                @Html.ActionLink("Изтрий", "Delete", new { id = item.ID })
            </td> 
        </tr>
    }    
</table>

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
Results @Model.FirstItemOnPage - @Model.LastItemOnPage от общо @Model.TotalItemCount Teachers

Answer 1

try with this code

<a href="@Url.Action("ActionName", "ControllerName", new { id = item.ID })">
  <img src="@Url.Content("~/Content/imgname.jpg")" />
</a>

Answer 2

If you want to use an icon (Image) use the following code:

@Html.ActionLink("Редактирай", "Edit", new { id = item.ID },  new { @class="class" })

Then write you css class to include a background image

a.class
{
background: url(../Images/image.gif) no-repeat top left;
 width: 50px;
 height: 50px;
 display: block;
 text-indent: -9999px; /* hides the link text */
 }

However, I would suggest using bootstrap glyphicons for example

<a href="@Url.Action("Action", "Controller")" class="btn btn-info">
Your link text 
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
</a>

Or

<span class="glyphicon glyphicon-ok" style="cursor:pointer" onclick="JavascriptFunction()"></span>

And in Javascript

function JavascriptFunction() {
window.location.href = encodeURI("/Controller/Action/");
}

You can pass the ID through the javascript function