如何在ASP.NET按钮内使用Twitter Bootstrap图标？

Question

我该如何使用 a 标签：

<i class="icon-etc"></i> 

使用 ASP.NET 按钮实现该功能？

- Korv

---

如果其中一个答案解决了您的问题，请将其选择为正确答案。 - Paulo Coghi

Answer 1

像这样的LinkButton...

<asp:LinkButton ID="SelectButton" runat="server" CssClass="btn btn-info"><i class="icon-ok icon-white"></i>&nbsp;Select</asp:LinkButton>

- Theo

---

这是最好的答案，我从来没有想到过！谢谢。 - Fortin

Answer 2

您可以将<i>标签作为LinkButton的Text属性值添加。

例如：

<asp:LinkButton ID="btnExcluir" runat="server" Text="<i aria-hidden='true' class='icon-remove-3'></i>" CssClass="btn btn-danger" />

你甚至可以在侧边添加文本。 例如：

<asp:LinkButton ID="btnExcluir" runat="server" Text="Link Name&nbsp;<i aria-hidden='true' class='icon-remove-3'></i>" CssClass="btn btn-danger" />

- felipe

---

我使用了这种方法，因为我需要能够从代码后台更改文本和图标。但是，我要补充一点，在使其工作时，我必须将<i>元素的类名用单引号括起来，即<asp:LinkButton ID="btnExcluir" runat="server" Text="Link Name&nbsp;<i aria-hidden='true' class='icon-remove-3'></i>" CssClass="btn btn-danger" />。 - Philip Stratford

注意到了@philip-stratford，谢谢！我刚刚更新了它以匹配您的建议。 - felipe

@Korv，我建议您选择一个最佳答案，这是一个很好的答案。 - Paulo Coghi

Answer 3

试试这个

<asp:LinkButton ID="btnExample" runat="server" Text="<span class='glyphicon glyphicon-repeat'></span> Button" CssClass="btn btn-primary btn-xs" OnClick="btn_Click"></asp:LinkButton>

或者

<asp:LinkButton ID="btnExample" runat="server" Text="<i class='glyphicon glyphicon-flash'></i> Button" CssClass="btn btn-primary btn-xs" OnClick="btn_Click"></asp:LinkButton>

敬礼，C语言：

- user3334463

---

请记得使用 asp:LinkButton 而不是使用 asp:Button，前者可以正常工作，后者不能。我曾经被这个坑过 ;) - PCPGMR

我发现在GridView选择按钮中使用I类最有用。 - wubblyjuggly

Answer 4

我已经这样做了。

标记：

<asp:PlaceHolder ID="phButtonToLabelsAdminBox" runat="server"></asp:PlaceHolder>
<asp:Button ID="btnSave" runat="server" CssClass="btn" Text="Spara" />
<asp:Button ID="btnClear" runat="server" CssClass="btn" Text="Töm/Ny" />

CodeBehind Page_Load()

FixGlyph(phButtonToLabelsAdminBox, btnSave, "icon-ok")
FixGlyph(phButtonToLabelsAdminBox, btnClear, "icon-refresh")

还有这个子例程：

Private Sub FixGlyph(ph As PlaceHolder, btn As Button, IconClass As String, Optional CustomLabelStyle As String = "")

If btn.Visible = False Then Exit Sub
Dim g As New HtmlGenericControl
g.ID = "labelFor_" + btn.ID
g.TagName = "label"
g.Attributes.Add("for", btn.ClientID)
g.Attributes.Add("class", "" + btn.CssClass + "")
If Not CustomLabelStyle = "" Then g.Attributes.Add("style", CustomLabelStyle)
g.InnerHtml = "<i class=""" + IconClass + """></i> " + btn.Text
ph.Controls.Add(g)
btn.Attributes.Add("style", "display:none;")

End Sub

我在标记中使用普通的asp:Button，唯一需要做的是在可能设置按钮可见性为true/false的其他代码之后运行FixGlyph，并按照您想要按钮出现的顺序添加FixGlyph。除此之外，它对我很有效。

- Anders Smedman

Answer 5

感谢Anders Smedman，你的代码确实完成了任务。 这是C#代码，如果有人需要的话。

 private void FixGlyph(PlaceHolder ph, Button btn, string iconClass, string customLabelStye = "")
    {
        if (btn.Visible)
        {
            var g = new HtmlGenericControl();
            g.ID = "labelFor_" + btn.ID;
            g.TagName = "label";
            g.Attributes.Add("for",btn.ClientID);
            g.Attributes.Add("class","" + btn.CssClass +"");
            if (customLabelStye != "")
            {
                g.Attributes.Add("style",customLabelStye);
            }
            g.InnerHtml = "<i class='" + iconClass + "'></i> " + btn.Text;
            ph.Controls.Add(g);
            btn.Attributes.Add("style","display:none;");
        }

    }

- user3693352