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

请勿与其他组件混合使用。图标类不能直接与其他组件组合。它们不应该一起使用同一元素上的其他类。相反，添加嵌套的<span>和将图标类应用于<span>。

所以试试：

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

<强> bootply example

Answer 2

由于输入标记不能包含任何其他html，正确的方法是使用按钮标记：

<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

首先下载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>

输入字段的屏幕中不显示图标

4 个答案: