將啟動圖標添加到按鈕

Question

我下面的代碼里面有帶有文本的按鈕，我想從引導程序（在文本的左側）中將圖標也添加到按鈕中，我該怎么做？

圖標是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-引導程序圖標字體的十六進制值 。 同樣最好使用這些類。

Answer 2

您可以使用按鈕標簽代替輸入

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

Answer 3

您發布的代碼並不能使我更好地為您提供幫助，但請嘗試一下。

您需要在.CreateButton:before {}內復制.glyphicon類的所有屬性， .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使用答案。