Icon for <li> tag

Question

Select.cshtml

<ul class="nav nav-tabs" id="myTabs"> <li>@Ajax.ActionLink("1 класс", "Class1", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab", @class="myLi" })</li> <li>@Ajax.ActionLink("2 класс", "Class2", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> <li>@Ajax.ActionLink("3 класс", "Class3", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> </ul> <div id="tabContent"></div>

_Layout.cshtml

 <!DOCTYPE html> <html> <head> <style> .myLi { list-style-image: url(images/check.png); /* Путь к файлу с маркером */ } </stype> ...

I want to put a green marker before the name of the first tab, so that it is:

but this is not happening.

Could you add a rendered html to the question? from the browser - teo van kot

Community spirit ♦ one · Accepted Answer · 2016-04-08T13:04:49

For a start, Ajax.ActionLink does not support inserting anything other than text, since the first argument is class System.String , you can avoid this by using standard Bootstrap libraries like: GlyphIcons or FontAwesome.

then your panel code will look like this:

 <ul class="nav nav-tabs" id="myTabs"> <li>@Ajax.ActionLink("1 класс", "Class1", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab", @class = "btn btn-default glyphicon glyphicon-edit" })</li> <li>@Ajax.ActionLink("2 класс", "Class2", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> <li>@Ajax.ActionLink("3 класс", "Class3", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> </ul>

Glyphs

Font-awesome

Well, here is a kosher solution:

Based on this discussion.

just change the css class to

  .myLi { background-image:url(images/check.png); }

But if you need to use custom images:

There are two ways: Helpers

  using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; public static class ImageActionLinkHelper { public static IHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes = null) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", imageUrl); builder.MergeAttribute("alt", altText); builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString(); return MvcHtmlString.Create(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } }

and in the view it like this

  @Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })

Brazenly steal from here

or

 <%= Ajax.ActionLink("[replacethis]", ...).Replace("[replacethis]", "<img src=\"/images/test.gif\" ... />" %>

What is not very beautiful, but quickly and simply. Square wheel bike

UPD: in the example, the wrong closing style tag in Layout.cshtml

teo van kot teo van kot 279 four eleven · Answer 2 · 2016-04-08T13:23:31

I think you just did not put the class there. You need this:

  <ul class="nav nav-tabs" id="myTabs"> <li class="myLi">@Ajax.ActionLink("1 класс", "Class1", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> <li>@Ajax.ActionLink("2 класс", "Class2", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> <li>@Ajax.ActionLink("3 класс", "Class3", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> </ul> <div id="tabContent"></div>

The fact is that the helper @Ajax.ActionLink generates a <a> tag. And it does not have a list-style-image property. I moved your class to li tag where it should be.

Just in case - here is an example .

An example of your option only with bootstrap nav jsfiddle.net/xFW8t/1002
@Batanichek agree, it will not work, I would rather add these pictures to the tag instead of these tricky styles.
because it is impossible to add a picture in the forehead to it

Community spirit ♦ one · Answer 3 · 2016-04-08T13:34:48

Not a lot of conjuring came to the conclusion that

 <style> [class^="icon-w"], [class*=" icon-w"] { background-image: url(http://www.mariowiki.com/images/thumb/e/e9/Check_mark.svg/50px-Check_mark.svg.png); background-repeat: no-repeat; display: inline-block; background-size:15px } </style>

I took the idea here __

  <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTabs"> <li >@Ajax.ActionLink("1 класс", "Class1", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab", @class = "icon-w" })</li> <li>@Ajax.ActionLink("2 класс", "Class2", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> <li>@Ajax.ActionLink("3 класс", "Class3", "Work201615", new AjaxOptions { UpdateTargetId = "tabContent" }, new { @data_target = "#tabContent", @data_toggle = "tab" })</li> </ul>

Icon for <li> tag

3 answers 3

More articles: