輸入字段的屏幕中未顯示圖標

Question

我有以下代碼，我想顯示一個引導圖標而不是按鈕。 知道我在做什么錯嗎？

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

我嘗試了以下方法，但它不起作用，您知道如何解決嗎？

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

也是這樣的：

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

Answer 1

根據Bootstrap文檔 ：

請勿與其他成分混合使用。 圖標類不能直接與其他組件組合。 它們不應與同一元素上的其他類一起使用。 而是添加一個嵌套的<span>並將圖標類應用於<span> 。

因此，請嘗試：

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

引導示例

Answer 2

由於input標簽不能在其中包含其他任何html，因此正確的方法是使用button標簽：

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

文檔中的示例

演示版

Answer 3

的CSS

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

要么

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

Answer 4

首先下載bootstrap文件夾： https : //github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip

解壓縮它，然后將文件上傳到服務器中，然后添加到標題中：

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