Custom icons for the calendar pop up button in RSForm

The problem

We have been working on a website that included reservation interface as well. For the reservation form we used RsForm Pro, which is a good Joomla extension to build the steps of a reservation. However, we have run into some trouble, when we wanted to customize the calendar button’s look.

The basic use of FontAwesome did not work properly in the Popup Label. We wanted to display Font Awesome icons on the calendar buttons, to make them nice, UX friendly and more unique. Copying and pasting the icon’s name into the popoup label wasn’t enough, it didn’t work. So we had to find another solution.

We checked the RSFrom forum but there was no solution for this.

No icon in the Rsform button

The solution

That is when we find out about the RokCandy component that led us to the solution of the problem. Here are the major steps how you can use Font Awesome icons in Rsform forms:

Download RokCandy from the JED (free Joomla extension.) and install it.

The component is only compatible with Joomla 3!

In RsForm create the form with the necessary fields with the date time picker field. RokCandy works well both with Font Awesome 4 and Font Awesome 5 as well.
In the following, both cases are presented, starting with Font Awesome 4.

Using Font Awesome 4.7.x icons in the form

01First create a css class and a rule, which will determine the font-family and icon color.

.dateadd {font-family: FontAwesome; color: #333;}

Copy and paste it to the Rsform / Form Properties / CSS and Javascript tab / CSS section. Note, that you should use the style tag in here.

CSS section within Rsform

02 As a second step create a RokCandy Macro and HTML syntax in the following way:

In Components ➙ RokCandy component create a New RokCandy Macro.

Here, there are two fields: Macro and HTML fields.

In the Macro field paste the name of the icon, without the prefixes or you can figure out a name for it by yourself. 

  [calendar-plus][/calendar-plus]
Adding icon syntax to the Macro field

To the HTML field copy and paste the icon itself. For this the Font Awesome 4.7 Cheat Sheet is the best.
So staying with the example in the case of calendar-plus icon this will be the code that we pasted in the HTML field: 

  
Paste the icon into the HTML field

03In the RSform now fill out the calendar field’s attributes tab:

Attributes tab of Calendar field type

Set the Calendar layout to popup ao now a pop up label field will appear. Then paste the macro content here. 

  [calendar-plus][/calendar-plus]
Adding the RokCandy macro as label of the calendar popup button

In the Additional Attributes field add the previously created css class: 

  class="dateadd"
Adding a CSS class attribute

Save it. You can repeat this method for the other date time picker field with another icon if you want.

Different Font Awesome icons in RSForm buttons.

Your template does not include Font Awesome? Here are the steps how you can integrate it into RSForm.

Using Font Awesome 5.1.x icons in the form

01First create a css class and a rule, which will determine the font-family and icon color.

  .dateadd {      font-family: "Font Awesome 5 Free";      color: #333;      }

Copy and paste it to the Rsform / Form Properties / CSS and Javascript tab / CSS section. Note, that you should use the style tag in here.

Adding CSS rule to Rsform

02 As a second step create a RokCandy Macro and HTML syntax in the following way:

In Components ➙ RokCandy component create a New RokCandy Macro

In the Macro field paste the name of the icon, without the prefixes or you can figure out a name for it by yourself. 

  [calendar-pl][/calendar-pl]

We pasted this to the Macro field.

Calendar plus icon in Macro field

To the HTML field copy the unicode of the icon. In Font Awesome 5.1.x you can get it with a click, if you click on the small version of the icon on the site:

Copying unicode from Font Awesome 5 site - click on the icon

Then paste the unicode glyph into the HTML field in RokCandy:

Pasted unicode in HTML field

03In the RSform now fill out the calendar field’s attributes tab:

Set the Calendar layout to popup so now a pop up label field will appear. Then paste the macro content here. 

  [calendar-pl][/calendar-pl]

In the Additional Attributes field add the previously created css class: 

  class="dateadd"
Ading an attribute and adding a label field to the field

Save it. You can repeat this method for the other date time picker field with another icon if you want.
So the result with Font Awesome 5 will be this:

Rsform Calendar buttons with Font Awesome 5 icons

Font Awesome integration to Rsform

If your template does not include FontAwesome 4.7x, then you should embed the following code line: 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome. min.css">
Embedded CDN code line for Font Awesome 4

If your template does not include FontAwesome 5.1x, then you should embed the following code line: 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Embedded CDN code line for Font Awesome 5


Blog