How to Integrate Font Awesome with Forms?

posted on September 26, 2014 • Show version history

I have been working on integrating Font Awesome with LF Forms. I am able to add the following JavaScript to link the hosted CSS file to the header of a form.

$('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />');

I can then use a custom HTML field to add different icons or even use CSS and JavaScript to put an icon next to a label.

I am current trying to add an icon inside of a Submit or even inside of a Field. My understanding is that those are input fields that it is not natively supported by Font Awesome using the <I> tags. Does anyone else have experience with or ideas on how we might be able to get this to work?

3 0

replied on September 26, 2014

You want to put an icon inside the Submit button or inside an input box?

1 0

View 4 previous replies

replied on September 26, 2014

Both. They would look something like this:

1 0

replied on September 26, 2014 • Show version history

You can do something like this:

$('<i class="fa fa-gift"></i>').insertBefore('#q1 input');

And then style it to get the grey box around it.

Because the submit button is an input, you can't put an icon in it. But you could create a button with custom HTML, add an icon to it, and use it instead of the submit button. (By hiding the submit button and triggering a submit button click whenever the new button is clicked.)

0 0

replied on September 26, 2014

If you want a style like that for your input, try this combination of CSS and JavaScript. It's not quite there, but it's close.

CSS

.iconFrame {
  float: right;
  padding:3px 10px 1px;
  border: 1px solid #C6C6C6;
  background-color: #C6C6C6;
}

JavaScript

$(document).ready(function() {
  $('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />');
  $('<div class="iconFrame"><i class="fa fa-gift"></i></div>').appendTo('#q1 label');
});

1 0

replied on September 26, 2014

If we chose to create our own buttons, can we make outflow decisions based off which button is clicked or do we lose the functionality?

1 0

replied on September 26, 2014 • Show version history

You wouldn't necessarily lose it. You'd have to link the custom button to something, like one of the default buttons that is hidden, or a radio button selection, etc. For example, if I wanted to replace the submit button, I'd use this custom HTML:

<button><i class="Submit fa fa-spinner fa-spin"></i>Submit</button>

And this JavaScript:

$(document).ready(function() {
  $('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />');

  $('button.Submit').click(function() {
    $('input.Submit').trigger('click');
  });
});

And this CSS:

input.Submit {display:none;}

1 0

replied on September 26, 2014

That is looking great! Thank you for your help. I applied it to a field that has content in the "Text below field" and it shows on that line as well. Is there a way to get it to be more specific to just the input field?

1 0

replied on September 29, 2014

Sure! Try this:

CSS

.iconFrame {
  float: left;
  padding:3px 10px 1px;
  border: 1px solid #C6C6C6;
  background-color: #C6C6C6;
}

JavaScript

$(document).ready(function() {
  $('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />');
  $('<div class="iconFrame"><i class="fa fa-gift"></i></div>').insertAfter('#q1 input');
});

4 0

Discussion

Discussion

How to Integrate Font Awesome with Forms?

Comments 8

Follow-Ups 0

Sign in to reply to this post.