Apply CSS class to HTML Action Link in Razor

I have the following HTML code:

<li>
  <a href="dashboard.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>

The Code displays the menu item as the following image:

I want to replace the link with @Html.ActionLink in Razor code, I try this:

<li>
  <i class="fa fa-dashboard fa-fw">@Html.ActionLink("Dashboard", "Index", "Home")</i>
</li>

But unfortunately it displays the menu item as:

I also tried:

<li>
   @Html.ActionLink("Dashboard", "Index", "Home", new { @class = "fa fa-dashboard fa-fw" })
</li>

The style overrides the text font and displays the result as:

How can I do this correctly?

Try this:

<li>
    <a href="@Url.Action("Dashboard", "Home")">
        Dashboard <i class="fa fa-dashboard fa-fw"></i> 
    </a>
</li>