• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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

Active 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

Active 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

Active 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.