Add bootstrap icon to button

Question

I've the following code which have button with text inside, I want to add to the button also icon from bootstrap (in the left side of the text ) how should I do that ?

The icon is 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 />

this doesn't look very complete. what's with this class on the top of the code? — Sten Pelzer, Jun 17 '14 at 11:58
@StenPelzer-I've update the post please check and let me know if someting missing... — 07_05_GuyT, Jun 17 '14 at 12:07

score 5 · Answer 1 · answered Jun 17 '14 at 13:26

5

You can use a button tag instead of input

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

answered Jun 17 '14 at 13:26

Gagan Gami

10,121
1
29
55

score 4 · Answer 2 · edited May 23 '17 at 12:06

4

use this to insert the icon

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

UPDATE : By using the tag , you are automatically inserting the icon in html. For more info look at this GLYPHICONS - bootstrap icon font hex value. Also it is better to use the classes.

edited May 23 '17 at 12:06

Community

1
1

answered Jun 17 '14 at 12:16

cache

113
1
11

Maciej Gurban · Accepted Answer · 2015-08-03T07:03:56.187

The code you posted doesn't really allow me to help you any better, but let's try.

You need to copy all properties of .glyphicon class inside .CreateButton:before {} and add - also there - content property with value of the icon you want to insert. Check glyphicons stylsheet to find out code of the icon you want. The plus sign you're searching for has a value of "\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;
}

Since this is the accepted answer, I'll add that in some circumstances it might be better to use the answer by user cache.

Thanks a lot ,how you get the content: "\e001"; and how should I put the glyphicon glyphicon-plus? — 07_05_GuyT, Jun 17 '14 at 12:22

Add bootstrap icon to button

3 Answers3