FontAwesome icon in submit button in RSFrom

The problem

It is always good when you are able to customize something on your website. In our case we created a Contact form with RsForm Pro, which is an easy to use Joomla extension to create a form.

We wanted to customize the Submit button with a Font Awesome send icon. In the following we show an extension that can be used in order to solve this kind of difficulty.

Default view of submit button
Default view - No icon in Rsform submit button

Embedding FontAwesome into Rsform

With the help of Rokcandy component you can integrate both FontAwesome 4.7.x and Fontawesome 5.1.x icons into Rsform.

The Rokcandy component is currently only ompatible with Joomla 3!

First things first, download RokCandy from the JED (free Joomla extension.) and install it. In RsForm create the form with the necessary fields and with the Submit button.

Using FontAwesome icons (4.7.x or 5.1.x) in the form

01 Go to Components ➙ Rokcandy ➙ Macros, and create a New Macro by clicking the New button.

Creating new macro field in Rokcandy
Creating new macro field

Here, in the Macro field you can create a macro for your icon.
For example:

[paper-plane][/paper-plane]
Macro field syntax
Macro field syntax

02 Now you have to copy and paste the whole syntax of the FontAwesome icon to the HTML field. So in our example this one:

For FontAwesome 4.7.x:

<i class="fa fa-paper-plane" aria-hidden="true"></i>

For FontAwesome 5.1.x:

<i class="far fa-paper-plane"></i>
HTML field syntax
HTML field syntax

03 As a final step copy the content of the Macro field, and insert it to the Submit button's field in RsForm, to the Label part:

Macro content in RsForm
Macro content in RsForm submit button

Submit buttons with two types of FontAwesome

Submit button with FontAwesome 4.7.x
RsForm submit button with FontAwesome 4.7.x
Submit button with FontAwesome 5.1.x
RsForm submit button with FontAwesome 5.1.x

If your template does not include FontAwesome, you have to embed a code line according to the given FontAwesome version.

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">
CDN code line for Font Awesome 4
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">
CDN code line for Font Awesome 5
Embedded CDN code line for Font Awesome 5



Cloudhoreca Kft. and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.