icons are not shown in the screen for input field

Question

I have the following code and I want to show a bootstrap icon instead of a button . Any idea what am I doing wrong?

 <input type="submit" value="Update" class="btn btn-default btn-update" />

I tried the following and its not working ,any idea how to solve it?

 <input type="submit" value="Update" class="glyphicon glyphicon-remove" />

and also like this:

<input type="submit" value="Update" class="btn btn-default glyphicon glyphicon-remove" />

Answer 1

Per the Bootstrap docs :

Don't mix with other components. Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span> .

So try:

<button type="submit" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-remove"></span>Update</button>

bootply example

Answer 2

Since the input tag cannot hold any other html in it, the correct way to do this is to use the button tag:

<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i> Update</button>

Example in documentation

Demo

Answer 3

CSS

input[type=submit] {
        background: url(where_your_image_is);
        border: 0;
        display: block;
        height: _the_image_height;
        width: _the_image_width;
    }

OR

 <input type="image" src="/yourImage" width ="" height="" border="0" />

Answer 4

first download the bootstrap folder : https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip

extract it and upload the files in your server than add to your header :

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>