You are viewing limited content. For full access, please sign in.

Discussion

Discussion

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
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');
});

 

 

3 0
You are not allowed to follow up in this post.

Sign in to reply to this post.