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 />

Answer 1

用它来插入图标

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

更新：通过使用标记，您将自动在html中插入图标。有关详细信息，请查看此GLYPHICONS - bootstrap icon font hex value。此外，最好使用这些类。

Answer 2

您可以使用按钮标记而不是输入

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

Answer 3

您发布的代码并不能让我更好地帮助您，但让我们试试。

您需要复制.glyphicon内.CreateButton:before {}类的所有属性，并添加 - 还有 - content属性，其中包含您要插入的图标的值。检查glyphicons stylsheet以查找所需图标的代码。您要搜索的加号的值为“\ 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;
}

由于这是已接受的答案，我将补充一点，在某些情况下，最好使用用户缓存的答案。

将引导图标添加到按钮

3 个答案: