0

私たちが使用しているテンプレートは、このような構造が設定されています。

<li><a href="dashboard.html"><span class="iconfa-laptop"></span>Dashboard</a></li>

Razor では @Html ヘルパーを使用できます。

<li>@Html.ActionLink("Home", "Index", "Home")</li>

上記は、リンク テキストの左側にアイコンを追加します。Html ヘルパーを使用してこの構造を複製する方法はありますか?

または、html を手動で入力する唯一の方法ですか?

4

2 に答える 2

1

別の解決策として、HtmlHelper の機能を拡張することを心配することなく、CSS を介して簡単に目的を達成することもできます。さらに、マークアップも削減されます。

.iconfa-laptop {
   display:inline-block;
   padding-left: 18px;
   line-height:18px;
   background: url('your-image')  center left no-repeat;
}

<a class="iconfa-laptop" href="dashboard.html">Test Link</a>

次に、次のことを簡単に実行できます。

<li>@Html.ActionLink("Home", "Index", "Home", null, new {@class = "iconfa-laptop"})</li>

CSSPad の例

于 2013-05-24T17:40:02.513 に答える