将 Bootstrap 图标添加到按钮

Question

我有以下代码，其中有一个带文本的按钮， 我想在按钮上添加来自Bootstrap的图标（在文本的左侧），我该怎么做？

图标为glyphicon glyphicon-plus。

<div style="margin-top: 20px">
    <p>
        @Html.ActionLink("New", "Create",
        null new { @class = "Button", @style = "float:right" })
    </p>    
</div> 
<br />
<style type="text/css">
        .CreateButton {
            background: blue
;
            color: white;
            padding: 4px 10px 4px 10px;
            height: 30px;
            width: 60px;
        }


    </style>
<br />

- 07_05_GuyT

---

看起来还不够完整。代码顶部的这个类是干什么用的？ - Sten Pelzer

@StenPelzer-我已经更新了帖子，请检查并告诉我是否有遗漏的内容... - 07_05_GuyT

你发布的代码不是HTML。它是什么？ - tjati

@omeinusch-its Razor，你可以在ASP.Net MVC中使用 :) - 07_05_GuyT

Answer 1

你可以使用 button 标签代替 input。

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

- Gagan Gami

Answer 2

使用此代码来插入图标：

使用此代码来插入图标

<i class="glyphicon glyphicon-plus"></i>

更新： 通过使用 <i> 标签，您可以自动将图标插入html中。有关更多信息，请查看此GLYPHICONS - bootstrap图标字体十六进制值。同时最好使用类。

- cache

Answer 3

您发布的代码并没有让我更好地帮助您，但我们可以试试。

您需要将.glyphicon类的所有属性复制到.CreateButton:before {}中，并在那里添加content属性，值为您要插入的图标。查看glyphicons样式表以查找所需图标的代码。您正在寻找的加号的值为"\2b"。

.CreateButton:before {
    // the part that will be different for each icon
    content: "\e001";
    // copied from .glyphicon class
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

既然这是被接受的答案，我想补充一点：在某些情况下，使用用户cache的答案可能更好。

- Maciej Gurban

---

非常感谢，您是如何获取内容“\e001”的？我应该如何放置glyphicon glyphicon-plus？ - 07_05_GuyT