能否将Bootstrap的图标放在{{ Form::submit(' ')}}中 - Laravel

Question

我想要修改这个：

{{ Form::submit('Delete this User', array('class' => 'btn btn-warning')) }}

变成这样：

{{ Form::submit('<i class="glyphicon glyphicon-delete"></i>', array('class' => '')) }}

我知道第二个选项不正确，有人知道如何以正确的方式书写吗？

- Gilko

Answer 1

使用类型为submit的<button>，它比提交输入框具有更高的灵活性：

{{Form::button('<i class="glyphicon glyphicon-delete"></i>', array('type' => 'submit', 'class' => ''))}}

为了清晰明确，这是类方法：

要使其清晰明确，这是类方法：

public function button($value = null, $options = array())
{
   if ( ! array_key_exists('type', $options) )
   {
       $options['type'] = 'button';
   }

    return '<button'.$this->html->attributes($options).'>'.$value.'</button>';
}

从这里可以看出，$value 可以保存你在 <button> 标签中放置的任何内容，因此把图标放在那里应该可以运行 - 我使用 Fontawesome 图标并且效果良好，我个人倾向于使用这些而不是 Glyphicon，但原理相同。

另一方面，如果使用 Form::submit()，你会创建一个 <input type="submit"，不能将 html 作为 value 属性的内容，这就是为什么你的解决方案不能工作的原因。

- Damien Pirsy

---

谢谢Damien！这个也可以：{{Form :: button（'<i> </ i>'，array（'type'=>'submit'，'class'=>'glyphicon glyphicon-remove'））}} - Gilko

是的，但是这个类应该分配给<i></i>标签，而不是表单标签，尽管最终它仍然可以工作，但这并不是理想的正确方式。 - Damien Pirsy

好的，我按照你说的放回去了 :) - Gilko

有没有人知道如何创建一个表单帮助类，而不生成表单HTML？说真的，在这里随意抨击并不合适，去写一篇博客文章吧。 - Damien Pirsy

Answer 2

这对我起作用

{{ Form::button('<span class="glyphicon glyphicon-remove"></span>', array('class'=>'btn btn-default', 'type'=>'submit')) }}

- Ignacio Fassini

---

嘿，@Damiey或其他人，你能帮我吗？如果我想为{!! Form:text() !!}实现相同的功能，我们该如何实现？非常感谢任何帮助。 - Tarunn

你想在文本输入框中实现一个 glyphicon 吗？@Tarunn - Ignacio Fassini

也许他想在输入框内放置一个按钮，就像在文本字段中显示日历的按钮一样。这可以使用Bootstrap完成，如下所示：<div class="input-group"> <div class="input-group-btn"> {{ Form::button('<span class="glyphicon glyphicon-remove"></span>') }} -->更多按钮... </div> {!! Form:text() !!}</div> - Ignacio Fassini

Answer 3

我使用了Html::linkRoutes来创建一个按钮，但无法实现你们之前提到的方法... 有人有什么猜测吗？这是我的代码：

<div class="col-md-12">
          {{ Html::linkRoute('posts.index', '<< Back to blog', [], ['class' => 'btn2 btn2-default']) }}
</div>

- sogeniusio

Answer 4

您可以将图标类添加到您的类数组中，例如：

array('class' => 'btn btn-primary glyphicon glyphicon-remove');

- Robert Nicjoo