FontAwesome with Grails <g:actionSubmit

Question

I've been trying to add icons to my save, delete, etc. buttons. I have about five buttons using the <g:actionSubmit> tag to call an action in a controller to perform the corresponding functions. My problem is that FontAwesome and bootstrap's glyphicons require the <i class="icon-***"> tag to be used like so:

<a href="http://google.com">
    <i class="icon-ok"></i> Google
</a>

In grails this format of the tag in between the initial tag is not possible (at least with actionSubmit). The value attribute is the string that is displayed. Is there any work around for this? Keep in mind I still need to map the buttons action back to a controller which is why I've had issue using a straight <button> tag like what is recommended for bootstrap.

UPDATE:

I'm having a lot of problems using the current 2 answers. They both work for adding the icons, but I'm getting some nuisances that I'm having to hack a lot of things up to fix. I thought about another solution but am having some problems implementing it. I'd like to write my own tag lib using the base of the taglib as the actionSubmit tag lib below:

def actionSubmit = {attrs ->
    attrs.tagName = "actionSubmit"
    if (!attrs.value) {
        throwTagError("Tag [$attrs.tagName] is missing required attribute [value]")
    }

    // add action and value
    def value = attrs.remove('value')
    def action = attrs.action ? attrs.remove('action') : value

    out << "<input type=\"submit\" name=\"_action_${action}\" value=\"${value}\" "

    // process remaining attributes
    outputAttributes(attrs)

    // close tag
    out << '/>'
}

The only change I need to make is to give it the ability to take the

<i class="icon-ok"></i>

tag in between a:

<g:actionSubmit ...> </g:actionSubmit>

Does anyone have suggestions or for this implementation?

Answer 1

Try passing the class name to remoteLink, which creates a link that uses Ajax to call a remote function and you can add your fontAwesome classes to it.

<g:remoteLink  class="btn icon-ok" action="index"  >
    click (without i tag)
</g:remoteLink>

or

<g:remoteLink  action="index" >
       <i class="btn icon-ok">click (with i tag) </i>
</g:remoteLink>

Both approaches should work.

Answer 2

Don't use actionSubmit, just use a <button> and provide the link/action properties like so:

<button type="submit" class="btn">
  <i class="..."></i> Update
</button>

here's a more detailed example

<button type="submit" class="btn btn-danger" name="_action_delete" value="Delete">
  <i class="..."></i> ${message(code: 'default.button.delete.label', default: 'Delete')}   
</button>

Note: actionSubmit passes the following input name/values for update, save and delete

name="_action_update" //update
name="_action_update" //save
name="_action_delete" //delete

so you would just need to do the same if you're app is dependent on them