フォントを使用したフォーム送信ボタンの2つの異なるフォント

私はgrailsスキャフォールディングテンプレートを変更しています。私はボタンに素晴らしいフォントアイコンを使用したいと思います。私がこれをやっている例は、下記のg：linkタグにあります。フォーム送信ボタンでこれをどのようにエミュレートするのかよく分かりません。助けをよろしく！フォントを使用したフォーム送信ボタンの2つの異なるフォント

<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：アイコンを使用した場合より簡単にスタイルに：

出典

2016-06-11 MayTheGrailsBeWithYou

その少しトリッキー、あなたはリンクが中に存在すること、その後、CSSの要素を作成し、リンクを透明にし、それから透明国境を始めどこよりも渡って、さらに少しをスケーリングする必要がありますバックグラウンド。 – Vahid

が、私は（フォームG対）HTMLフォームを使用しました。以下のようなものが得られ：

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

出典

2016-06-14 16:18:20

フォントを使用したフォーム送信ボタンの2つの異なるフォント

答えて

関連する問題