FontAwesome Icons in Registration Form

FontAwesome Icons in Registration Form

Matthew Hawley

Well-known member
#1
yolulz submitted a new resource:

FontAwesome Icons in Registration Form - FontAwesome!

FontAwesome Website: http://fortawesome.github.io/Font-Awesome/
FontAwesome Icons: http://fortawesome.github.io/Font-Awesome/icons/

1. Go to register_form and replace everything with:

Code:
<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}"
    data-normalSubmit="1"
>...
Read more about this resource...
 

kankan

Well-known member
#2
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
 

Sheldon

Well-known member
#3
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.
 

kankan

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

Regards
 

Sheldon

Well-known member
#5
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.
 

kankan

Well-known member
#6
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.
Regards
 

Luxus

Well-known member
#12
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:
Code:
[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.
 
Top