表单提交按钮中的两种不同字体使用字体真棒答案

【问题标题】：Two different fonts in form submit button using font awesome表单提交按钮中的两种不同字体使用字体真棒
【发布时间】：2016-06-11 18:52:00
【问题描述】：

我正在修改 grails 脚手架模板，我想为我的按钮使用超棒的字体图标。我如何做到这一点的一个例子是在下面的 g:link 标记中。我不确定如何使用表单提交按钮来模拟这一点。感谢任何帮助！

    <g:form resource="\${this.${propertyName}}" method="DELETE">
            <fieldset class="buttons">
                <g:link class="" action="edit" resource="\${this.${propertyName}}"><i class="fa fa-pencil fa-lg">&nbsp;</i><g:message code="default.button.edit.label" default="Edit" /></g:link>
                <input class="" type="submit" value="\${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('\${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
            </fieldset>
        </g:form>

附加的屏幕截图显示了它现在的样子。

Example

生成的html：

    <form action="/fruits/delete/15" method="post" ><input type="hidden" name="_method" value="DELETE" id="_method" />
            <fieldset class="buttons">
                <a href="/fruits/edit/15" class=""><i class="fa fa-pencil fa-lg">&nbsp;</i>Edit</a>
                <input class="" type="submit" value="Delete" onclick="return confirm('Are you sure?');" />
            </fieldset>
        </form>
    </div>

【问题讨论】：

这有点棘手，您需要创建一个链接所在的 css 元素，然后使链接透明并比它开始的位置和透明边框背景更进一步。

标签： html twitter-bootstrap grails font-awesome gsp

【解决方案1】：

我发现在使用图标时使用 html 表单（vs g:form）更容易设计样式。结果如下：

<form id="delete_id" action="${createLink(action: 'delete_method')}" method="get"> <button class="some_layout"type="submit"}> <i class="fa fa-pencil fa-lg"> </i> Edit </button> </form>

【讨论】：