Need help setting up font awesome icons for my form

I’ve followed the Jotform provided directions for adding Font Awesome icons to the CSS but it’s still not working.

Can someone help look at my form for me to double check the CSS?

Hello J_B_D,

Thanks for reaching out to Jotform Support. It looks like you're trying to add the video-camera icon before the field with the label_5 ID name, however, I was not able to find the field that has the ID name. Could you please let us know which part of your form you want to place the video-camera icon so we can provide you with the correct CSS code?

We look forward to assisting you further.

Oops.

I'd like something similar to this, for example, next to the billing zip code field:

fa-light fa-credit-card

Hello J_B_D,

Please delete all the CSS code you have in your form and then inject the CSS code below:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");





#label_201:before{

 position: absolute;

 left: -18px; 

 top: 20px;

 font-family: FontAwesome;

 content: "\f09d";

 font-size: 24px;

}



#label_201{

 margin-bottom: -20px;

}



.form-collapse-table {

  background : white!important;

}



.form-submit-button {

  background-color : #294024 !important;

}



.form-submit-button:hover {

  background-color : #294024 !important;

}



#input_scl_157 {

  background-color : #808080 !important;

}



#form-pagebreak-back_157 {

  background-color : #808080 !important;

  color : #ffffff;

}



.form-sacl-button {

  color : #ffffff;

  !important;

}



label#label_4, label#label_5, label#label_44, label#label_9, label#label_10, label#label_33, label#label_58, label#label_67, label#label_74, label#label_77, label#label_79, label#label_64, label#label_103, label#label_119, label#label_120, label#label_130, label#label_197, label#label_198, label#label_199, label#label_203, th#ccTitle5, th#ccTitle119 {

  display : none;

  !important;

}



li[data-type="control_stripe"] span.form-product-item,



li[data-type="control_stripe"] br,



li[data-type="control_stripe"] hr {

  display : none !important;

}



.payment_footer.new_ui {

  display : none;

}



.avatarBox {

  display : none;

}



.formFooter.f6.branding21 {

  display : none;

}



.form-collapse-table:after {

    background-image : url(https://justbetterdelivery.com/wp-content/uploads/2022/05/down-arrow-button.png);

  background-size : 20px;

  background-repeat : no-repeat;

}



.appointmentCalendar .calendarDay:after {

  background-color : #2da100 !important;

}



.dayOfWeek {

  color : #2da100 !important;

}



.appointmentSlot {

  border-color : #2da100 !important;

  color : #2da100 !important;

}



.appointmentSlot.active {

  border-color : #2da100 !important;

  background-color : #2da100 !important;

  color : #000 !important;

}



.appointmentSlot::hover {

  background-color : #2da100 !important;

}



.calendarDay.isSelected > span {

  background-color : #2da100 !important;

}



.calendarDay.isActive> span {

  background-color : #2da100 !important;

}



.currentDate {

  border-color : #2da100 !important;

}



.isToday > span {

  border-color : #2da100 !important;

}



.forSelectedDate {

  background-color : #2da100 !important;

}



input:focus, input:hover, 

textarea:focus, textarea:hover,

select:focus, select:hover {

  outline : none !important;

  border : none !important;

  box-shadow : 0 0 0px 0px black !important;

  background : #f6f7f8;

}



.appointmentSlot:not(.disabled):not(.active):hover, .appointmentDayPickerButton:hover {

  background-color : #2da100;

  color : white !important;

}



}

.form-pagebreak-next {

  padding : 0 30px !important;

  border-radius : 50px !important;

  background-color : #2da100 !important;

}



.form-pagebreak-next, .form-submit-button, .form-sacl-button, .js-new-sacl-button, .jf-form-buttons {

  padding : 0 30px !important;

  border-radius : 50px !important;

  background-color : #294024 !important;

}



#id_9, #id_77 {

  padding-top : 0 !important;

  padding-bottom : 0 !important;

}



#id_64 {

  padding-top : 4px !important;

  padding-bottom : 4px !important;

}



.form-address-line-wrapper+.form-address-line-wrapper {

  margin-top : 4px !important;

}



#id_130 {

  padding-top : 0 !important;

}



#sublabel_input_9 {

  display : none !important;

}



.form-textbox {

  border-radius : 15px!important;

}



#input_scl_82 {

  display : none;

}



#id_58,.fins {

  padding-top : 0px !important;

  padding-bottom : 0px !important;

}



div#cid_56, \ {

  margin : auto;

  width : 50%;

  padding : 10px;

}



label#label_56, label#label_160, input_input#160,.fins {

  text-align : center;

}

label#label_160 {

 text-align: center;

}

label#label_152 {

 text-align: center;

}

label#label_46 {

 text-align: center;

}

label#label_45 {

 text-align: center;

}

div#cid_160 {

 width: 50%;

 margin: auto;

}

div#cid_152 {

 width: 50%;

 margin: auto;

}

Result:

Give it a try and let us know if you need any help.

Awesome.

Is there any way to still hide the label? You can see a tiny corner of a letter.

Also, how do I place this one:
fa-light fa-list

Before (left of) the words Shopping List

Hello,

> Is there any way to still hide the label? You can see a tiny corner of a letter.

To achieve this, you'll need to modify the beginning portion of your custom code as follows:

#label_201:before{

 position: absolute;

 left: -18px; 

 top: 18px;

 font-family: FontAwesome;

 content: "\f09d";

 font-size: 24px;

 visibility: visible;

}



#label_201{

 margin-bottom: -20px;

 visibility: hidden;

}

Here is the form that you can try: https://form.jotform.com/221440862136955

> Also, how do I place this one: fa-light fa-list Before (left of) the words Shopping List

I believe you're referring to the following icon:

For this, you need to use the following CSS code. Put this code at the end of your existing CSS code.

#text_212 > p > span:before{

 font-family: FontAwesome;

 content: "\f03a";

 font-size: 24px;

 margin-right: 10px;

}

Following is how it will work:

Let us know if you have any questions or come across any issues.

Can you help me with the CSS for the following Font Awesome icons placement?
(See photoshop mockup below)

f07a

f4ac

e026

facb

Thank you so much for your help.

Hello J_B_D,

For this, you need to use the following CSS code. Put this code at the end of your existing CSS code.

#text_155 > ul > li:nth-child(1)::marker {

 content:"";

 font-family: FontAwesome;

 content: "\f07a  ";

}



#text_155 > ul > li:nth-child(2)::marker {

 content:"";

 font-family: FontAwesome;

 content: "\f4ac  ";  

}



#text_155 > ul > li:nth-child(3)::marker {

 content:"";

 font-family: FontAwesome;

 content: "\e026  ";  

}



#text_155 > ul > li:nth-child(4)::marker {

 content:"";

 font-family: FontAwesome;

 content: "\facb  ";  

}

If you have any further questions, please let us know.

Thank you,

How can I move the icons down slightly?

Hello J_B_D,

Only certain CSS properties can be used in a rule with ::marker as a selector. I.e. All font properties; The white-space property; color. Unfortunately, repositioning the ::marker is currently not possible.

If you have any further questions, please let us know.

Okay. Is there a different way to apply these Font Awesome icons using CSS in my particular instance that will allow repositioning?

Hello J_B_D,

Unlike ::market pseudo-element, the ::before pseudo-element allows repositioning. For this, you can use the following CSS code. Put this code to replace the market pseudo element existing CSS code.

#text_155 > ul > li:nth-child(1)::marker {

 content: '';

 }

  

#text_155 > ul > li:nth-child(1)::before {

  content : "";

  font-family : FontAwesome;

  font-size : 24px;

  content : "\f07a ";

  position: relative;

  top: 5px;

  right: 4px;

}

If you have any further questions, please let us know.

That seems to have moved it to the right like an indent.

Could you help me achieve the following? (Photoshop mockup)

Hello J_B_D,

I don't see any issues with the icon alignment on your form (screenshot attached for your reference).

It seems you were able to solve this on your own. However, if you still see the problem, let us know the browser and device on which you're trying, we'll check accordingly and get back to you.

If you have any other questions, let us know.

I'd like the icons to be moved down slightly so they're more aligned/centered with the text. Currently, they are slightly higher.

Also, could someone help me with the CSS to input these font awesome icons next to these fields?

If it's possible, move field titles slightly to the right (as shown)

Thank you!!

Hello there,

> I'd like the icons to be moved down slightly so they're more aligned/centered with the text. Currently, they are slightly higher.

In order to fix this, you'll first need to remove/comment out the following CSS code as the ::marker pseudo-element doesn't allow positioning:

#text_155 > ul > li:nth-child(1)::marker {

    content : "";

    font-family : FontAwesome;

    font-size : 24px;

    content : "\f07a  ";

}

#text_155 > ul > li:nth-child(2)::marker {

    content : "";

    font-family : FontAwesome;

    font-size : 24px;

    content : "\f086  ";

}

#text_155 > ul > li:nth-child(3)::marker {

    content : "";

    font-family : FontAwesome;

    font-size : 24px;

    content : "\f290  ";

}

#text_155 > ul > li:nth-child(4)::marker {

    content : "";

    font-family : FontAwesome;

    font-size : 24px;

    content : "\f06c  ";

}

After this, please add the following CSS code and then check again (you can adjust the positioning yourself using the 'top' variable):

#text_155 > ul > li{

  position: relative;

  padding-left: 7px;

}

#text_155 > ul > li:before{

  font-family : FontAwesome;

  font-size : 24px;

  position: absolute !important;

  top: -8px;

  left: -24px;

}

#text_155 > ul > li:nth-child(1):before{

  content : "\f07a";

}

#text_155 > ul > li:nth-child(2):before{

  content : "\f086";

}

#text_155 > ul > li:nth-child(3):before{

  content : "\f290";

}

#text_155 > ul > li:nth-child(4):before{

  content : "\f06c";

}

Here is the demo that you can check first: https://form.jotform.com/221518607006954

Let us know if you have questions.

Hi, I just noted your other CSS query. I'm working on it. Please allow me some time.

Hello there,

> Also, could someone help me with the CSS to input these font awesome icons next to these fields? If it's possible, move field titles slightly to the right (as shown)

To achieve this, please use the following CSS code:

#label_44, #label_64, #label_77{

  padding-left: 10px;

}



#label_44:before, #label_64:before, #label_77:before{

 font-family: FontAwesome;

 position: absolute;

 left: 0px;

}



#label_44:before{ /* Your name */

 content: "\f007";

}



#label_64:before{ /* Delivery address */

 content: "\f007";

}



#label_77:before{ /* Delivery instructions */

 content: "\f007";

}

Here is the demo page that you can check: https://form.jotform.com/221519037500951?jumpToPage=2

Please note that not all Font Awesome codes provided are working, please replace the content codes as per your requirement in the provided code.

Let us know if you have questions.