字体很棒，输入类型'submit'-Java 学习之路

174

在font-awesome中似乎没有输入类型'submit'的类 . 是否可以使用font-awesome中的某些类来输入按钮？我在我的应用程序中为所有按钮添加了图标（实际上它们与来自twitter-bootstrap的类'btn'相关联），但无法在'input type submit'上添加图标 .

或者，如何使用此代码：

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

HTML：

<input type="submit" id="image-button">Text</input>

（我从HTML: How to make a submit button with text + image in it?拿走了）字体真棒？

7 回答

也可能这样

<button type="submit" class="icon-search icon-large"></button>

回复于 2024-05-09T16:20:59+08:00

使用button type =“submit”而不是input

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

对于Font Awesome 3.2.0使用

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

回复于 2024-05-09T16:20:59+08:00

296
HTML

由于 <input> 元素仅显示value属性的值，因此我们必须仅操作它：
```
<input type="submit" class="btn fa-input" value="&#xf043; Input">
```
我在这里使用  实体，它对应于U F043，Font Awesome 's ' tint'符号 .

CSS

然后我们必须设置它的样式以使用字体：
```
.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```
这将为我们提供Font Awesome中的色调符号以及相应字体中的其他文本 .

但是，此控件不会像素完美，因此您可能需要自己调整它 .
回复于 2024-05-09T16:20:59+08:00
11
你可以使用字体awesome utf cheatsheet
```
<input type="submit" class="btn btn-success" value="&#xf011; Login"/>
```
这是cheatsheet的链接http://fortawesome.github.io/Font-Awesome/cheatsheet/
回复于 2024-05-09T16:20:59+08:00
46
好吧，从技术上讲，不可能让 :before 和 :after 伪元素在 input 元素上起作用

来自W3C：

12.1：before和：after伪元素作者使用：before和：after伪元素指定生成内容的样式和位置 . 正如其名称所示，：before和：after伪元素指定元素文档树内容之前和之后的内容位置 . 'content'属性与这些伪元素一起指定插入的内容 .

所以我有一个项目，我以 input 标签的形式提交按钮，由于某种原因，其他开发人员限制我使用 <button> 标签而不是通常的输入提交按钮，所以我提出了另一种解决方案，将按钮包裹在里面a span 设置为 position: relative; 然后使用 :after pseudo绝对定位图标 .

注意：演示小提琴使用FontAwesome 3.2.1的内容代码，因此您可能需要相应地更改内容属性的值 .

HTML
```
<span><input type="submit" value="Send" class="btn btn-default" /></span>
```
CSS
```
input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}
```
演示

现在这里一切都是自我解释的，关于一个属性，即 pointer-events: none; ，我已经使用过，因为将鼠标悬停在 :after 伪生成内容上时，您的按钮不会单击，因此使用 none 的值将强制点击操作通过通过那些内容 .

来自Mozilla Developer Network：

除了指示元素不是鼠标事件的目标之外，值none还指示鼠标事件“穿过”元素并将目标定位在该元素的“下面” .

将心形字体/图标Demo悬停，看看如果你不使用 pointer-events: none; 会发生什么
回复于 2024-05-09T16:20:59+08:00
7
您可以使用类型为 submit 的按钮类 btn-link 和 btn-xs ，这将创建一个带有图标的小隐形按钮 . 例：
```
<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>
```
回复于 2024-05-09T16:20:59+08:00

通过多次提交，当您需要所选提交的值时，可以非常轻松地完成此操作 . 只需在表单中创建一个隐藏字段，并根据单击的按钮更改其值 . 例如，在表单中，假设您有：

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

使用jQuery：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

然后，您可以检索“Clicked”post变量中单击的按钮的值

回复于 2024-05-09T16:20:59+08:00

字体很棒，输入类型'submit'

7 回答

HTML

CSS

相关问题