CODEWITHSUNDEEP
cssasp.net-mvcrazor
K.Z
K.Z

Reputation: 5075

print icon and text for ActionLink ASP.NET razor code

i am using ActionLink to print icon and hyperlink text... which is working fine but my text is appearing on icon... 

@Html.ActionLink("New FreeZone", "CreateNewFreeZone", "Qualification", null, new { @class = "CreateNewEntry_Icon" })

CSS

 .CreateNewEntry_Icon{ 
 height:24px;
 display:inline-block;
 background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top left;
 }

Upvotes: 1

Views: 326

Answers (2)

Babu
Babu

Reputation: 35

I would suggest you to have two separate items, it is always difficult to arrange the icon as you want so by keeping it separate it will solve you problem as well as gives you the freedom to position you image and text of your choice. you can write your razor style for these elements

<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Works.</span>
</div

Upvotes: 1

Nilesh Gajare
Nilesh Gajare

Reputation: 6398

Add line-height in your CSS

.CreateNewEntry_Icon{ 
 line-height:5; //Adjust Accordingly
 display:inline-block;
 background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top left;
 }

Check the fiddle

Upvotes: 2

Related Questions