FontAwesome Icons in Registration Form

FontAwesome Icons in Registration Form

Matthew Hawley

Well-known member
yolulz submitted a new resource:

FontAwesome Icons in Registration Form - FontAwesome!

FontAwesome Website:
FontAwesome Icons:

1. Go to register_form and replace everything with:

<xen:title>{xen:phrase sign_up}</xen:title>

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"
    data-fieldValidatorUrl="{xen:link register/validate-field}"
Read more about this resource...


Well-known member
Thanks Yolulz
In the same way, do you know what do i have to change if i want to add an icon next to a personnalised field title ?

Thank you


Well-known member
Find whatever it is, add this (usually before the phrase):

<i class="icon-lock icon-large icon-fixed-width" style="padding-right:7px;"></i>

"icon lock" - icon name
"icon-size" - icon size (if any)
"icon-fixed-width" - Just a suggestion to always have

Repeat that exact line anywhere you want an icon to show up in your installation.


Well-known member
Hi Sheldon,
In wich template do i have to add this line? As in registration template i have no mention to my personnlised fields.



Well-known member
Add it before where ever you added in the personalized field. How did you get them to appear? Go to that point, add the icon.


Well-known member
ok thanks

I added it next to the title box but seems not supporting HTML
code is displayed in the registration page.
I tried to add it in HTML field in general option of the personnalized field, but no chance either.
It works when i add the code in the Description Field, but i would like to have it next right to the Title field.


Well-known member
Yes. FontAwesome doesn't require specific elements. It works with all elements that use fontawesome's CSS classes. Just look at Fontawesome's CSS rules:
[class^="icon-"],[class*=" icon-"]
As you can see, it doesn't specify an element.

You can use <em>, <span>, <h1>, <bla> and even <xenforo>. Try it.