Sitecore link with icon

Question

Hi I want to design link button with icon. When I click on link button or icon it will navigate to the url. For that I used the below code. It is giving me the link with icon next to the link. What I want is icon first and after that link button

@Html.Sitecore().BeginField("ReturnLink", new { @class = "link-arrow" })
<i class="icon">
  @Html.Sitecore().Field("ReturnLinkIcon")
</i>
@Html.Sitecore().EndField()

 

<a class="link-arrow" href="www.google.com">Back To Internet
                <i class="icon">
                    <img src="xxx.jpg">
                </i>
                </a>

Please help me how to display the icon first and then link next to icon like below

Answer 1

One way to have control over the link rendering is to build the HTML self. For this you must obtain the URL and the text of the LinkField.

See https://briancaos.wordpress.com/2012/08/24/sitecore-links-with-linkmanager-and-mediamanager/

Example In Razor

@using Sitecore.Data.Fields
@using Sitecore.Data.Items

@functions { 
public static string GetLinkUrl( Item item, string fieldName)
        {
        var linkField = (LinkField) item.Fields[fieldName];
            if (linkField == null)
            {
                return string.Empty;
            }
            switch (linkField.LinkType.ToLower())
            {
                case "internal":
                    // Use LinkMananger for internal links, if link is not empty
                    return linkField.TargetItem != null ? Sitecore.Links.LinkManager.GetItemUrl(linkField.TargetItem) : string.Empty;
                case "media":
                    // Use MediaManager for media links, if link is not empty
                    return linkField.TargetItem != null
                               ? Sitecore.Resources.Media.MediaManager.GetMediaUrl(linkField.TargetItem)
                               : string.Empty;
                case "external":
                    // Just return external links
                    return linkField.Url;
                case "anchor":
                    // Prefix anchor link with # if link if not empty
                    return !string.IsNullOrEmpty(linkField.Anchor) ? "#" + linkField.Anchor : string.Empty;
                case "mailto":
                    // Just return mailto link
                    return linkField.Url;
                case "javascript":
                    // Just return javascript
                    return linkField.Url;
                default:
                    // Just please the compiler, this
                    // condition will never be met
                    return linkField.Url;
            }
        }

}

@{
    LinkField linkfield = Sitecore.Context.Item.Fields["ReturnLink"];
}

 

<a href="@GetLinkUrl(Sitecore.Context.Item, "ReturnLink")">
    <i class="icon">
      @Html.Sitecore().Field("ReturnLinkIcon")
    </i>
    @linkfield.Text
</a>

Of course you can better place the function in a helper class or do things in the controller.