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

Question

Question

How to use Font Awesome with Forms?

Forms
Updated January 29, 2018
asked on January 24, 2018 • Show version history

Hi.

I have had quite the day today figuring out HTML, CSS and JavaScript on my own - not fun.

I just want to add some dynamic functionality to a demo I am presenting soon.

I am having genuine trouble with this since I have never setup anything of a kind.

I have been using webhelp: https://www.laserfiche.com/support/webhelp/Laserfiche/10/en-US/administration/Subsystems/Forms/Content/Forms/Form-Fields/Custom-HTML.htm#Creating

w3schools: https://www.w3schools.com/html/html_attributes.asp

and lf answers: https://answers.laserfiche.com/questions/64069/How-to-Integrate-Font-Awesome-with-Forms

in search of some kind of salvation.

I've been told to reference :

<script src="https://use.fontawesome.com/f1a3bd92f4.js"></script>

Nope. No idea what to do after this or even how to get it started.

Can anyone give me a brief step by step how to use CSS and JavaScript to just simply build a more dynamic form. I want it to interact and be properly presentable.

Anyone willing to help?

0 0

Answer

SELECTED ANSWER
replied on January 25, 2018

I am still not sure where you are trying to place your image at but here is an example:

Here is the end-result

that field is coded with class "whatever", then input this into your CSS:

.whatever input {background: url(http://www.iconsplace.com/icons/preview/orange/phone-256.png); background-repeat: no-repeat; background-scroll: scroll; background-size: 20px 20px;
padding-left:30px;}

OR

If you want to do something like this:

.whatever label {
	background: url(http://www.iconsplace.com/icons/preview/orange/phone-256.png); 
	background-position: 70%;
	background-repeat: no-repeat; 
	background-size: 20px 20px;
	 }

Hope that helps you somewhat in regards to posting an image. The font Awesome, should be downloaded onto your forms server and placed into a directory (there is documentation on the support site about this), then follow these instructions for setup in your CSS.

Using CSS

  1. Copy the entire font-awesome directory into your project.
  2. In the <head> of your html, reference the location to your font-awesome.min.css. 
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Check out the examples to start using Font Awesome!
1 0

Replies

replied on January 24, 2018

Hi, 

From my brief look at the Font Awesome web site, the <script src...> should be appended to the head, just like the CSS stylesheet. Try just adding that tag after the end of the <link rel ...> tag and before the closing ' symbol. You also should move that entire first line of code starting with $('head') to the line immediately after "$(document).ready(function () {"

Also, I'm not sure exactly what you are trying to achieve so I can't test this suggestion yet. If you provide a bit more detail on what you want your form to look like and do, I may be able to give more detailed help.

1 0
View 1 previous reply
replied on January 24, 2018

Hi Karina!
 

Did you check the link I posted for LF answers? I want to add icons to my fields. For example have telephone field with a little moving telephone icon next to it.

A good example is on the link I posted. I am basically trying to achieve what he did.

I want to call icons from Font Awesome via CSS and Javascript, apparently you set it up using these two.

Am I explaining it properly? (Not very experienced in coding at all, apologies for over-asking!)

Thanks

0 0
SELECTED ANSWER
replied on January 25, 2018

I am still not sure where you are trying to place your image at but here is an example:

Here is the end-result

that field is coded with class "whatever", then input this into your CSS:

.whatever input {background: url(http://www.iconsplace.com/icons/preview/orange/phone-256.png); background-repeat: no-repeat; background-scroll: scroll; background-size: 20px 20px;
padding-left:30px;}

OR

If you want to do something like this:

.whatever label {
	background: url(http://www.iconsplace.com/icons/preview/orange/phone-256.png); 
	background-position: 70%;
	background-repeat: no-repeat; 
	background-size: 20px 20px;
	 }

Hope that helps you somewhat in regards to posting an image. The font Awesome, should be downloaded onto your forms server and placed into a directory (there is documentation on the support site about this), then follow these instructions for setup in your CSS.

Using CSS

  1. Copy the entire font-awesome directory into your project.
  2. In the <head> of your html, reference the location to your font-awesome.min.css. 
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Check out the examples to start using Font Awesome!
1 0
replied on January 25, 2018

THIS IS IT!

Hello.

Lidija Bell. Thank you.

This is EXACTLY what I wanted to do. Wow this is SO straight forward and simple how did it take me 2 days to try and figure this out.

Thank you, again. Have an incredible weekend/FRIDAY!

0 0
replied on January 29, 2018

You are very welcome, I am so glad I was able to help you. If you would like to learn more about css (and html), I would suggest getting a Lynda.com subscription since they have fantastic raining material. I took one web coding class in college and we were required to watch Lynda training videos.

1 0
replied on January 24, 2018

To my knowledge, Javascript isn't normally used for fonts selections. CSS and HTML would be best, think about it this way if the end product is a moving fish:

HTML is the bones of the fish.

CSS is the flesh of the fish.

Javascript makes the fish move and swim.
 

If you are trying to change the font on a field in your form then use CSS, it is easier. If you are trying to change the font in a block of text within your form, use HTML (Custom HTML block). Using javascript to change a font is an overkill unless you are doing something like Blake was trying to accomplish in that question.

I think you should add a CSS class to your field (example "phone") and then write a CSS:

@font-face {
        font-family: "Name of your font";
        src: url(name-of-font.tff);
}

Note that you should reference the .tiff of the font in this situation. Hope that helps!

1 0
replied on January 24, 2018

Hi,

This does help - thanks!

I am trying to do what Blake did in that post, yes.

I get that you need to somehow combine CSS, HTML and Java to have an interactive form but what I don't get is how to reference an external source, and then actually use it to achieve a result on the visual side of things.

With Font Awesome you can download the zip and reference the path, great, but then what!

Thanks for your reply, I appreciate.

0 0
replied on January 25, 2018

Gotcha, so what you do after you have your zip is put it on your Laserfiche Forms server and reference it there OR a lot of fonts out there are online fonts and you can just reference it to that place on the internet (they provide that code on the font page).

So you are trying to set a different font and a picture for a specific field, correct? I can give it a shot in a test form and send you my results.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...