CODEWITHSUNDEEP
asp.net-mvc-4sitecoresitecore8
Suresh R
Suresh R

Reputation: 249

How to add Bootstrap icons in Sitecore MVC link fields

I have below HTML Code:

<a data-toggle="dropdown">Associate Sites<i class="fa fa-angle-down"></i></a>

Using Sitecore MVC Field:

 @Html.Sitecore().BeginField("Link Field", new { @data_toggle = "dropdown" })
 @Html.Sitecore().Field("Destination URL", item.Item, new { @data_toggle = "dropdown" })<i class="fa fa-angle-down"></i>
 @Html.Sitecore().EndField()

Result:

<a href="/en" data_toggle="dropdown">Associate Sites</a> <i class="fa fa-angle-down"></i>

Expected Result:

<a href="/en" data_toggle="dropdown">Associate Sites<i class="fa fa-angle-down"></i></a>

Please help me , How I can I integrate Bootstrap icons into Sitecore fields.

Upvotes: 0

Views: 291

Answers (1)

jammykam
jammykam

Reputation: 17000

You just need the following:

@Html.Sitecore().BeginField("Destination URL", item.Item, new { @data_toggle = "dropdown" })
    <i class="fa fa-angle-down"></i>
@Html.Sitecore().EndField()

This will output the following HTML:

<a href="/my-url" data_toggle="dropdown">My Page Name
    <i class="fa fa-angle-down"></i>
</a>

Since you are clearly using Glass Mapper in your solution then you should make use of this functionality instead of using the Sitecore Field helpers and "magic strings"

@Html.Glass().Editable(Model, x => x.DestinationURL, 
    string.Format("<a href=\"{0}\" data-toggle=\"dropdown\">{1}<i class=\"fa fa-angle-down\"></i></a>", x.DestinationURL.Url, x.DestinationURL.Text))

Upvotes: 1

Related Questions