FontAwesome Icons in Registration Form

FontAwesome Icons in Registration Form

Overview Updates (2) Reviews (8) Discussion
M

Matthew Hawley

Well-known member
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"
>...
Click to expand...

Read more about this resource...
 
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
 
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.
 
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
 
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.
 
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
 
<span class="icon-lock icon-large icon-fixed-width" style="padding-right:7px;"></span>

So this code will work?
 
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.
 
You must log in or register to reply here.

Similar threads

DeltaHF
Reduce FontAwesome icon font file size
3 4 5
Replies
81
Views
8K
DeltaHF
DeltaHF
M
Font Awesome Icons in Navbar for 2.1
2 3
Replies
47
Views
7K
CTS
C
BassMan
[cXF] Icons for Login and Register buttons
Replies
15
Views
3K
CTS
C
D
  • Question Question
XF 1.5 Is just me or do you have register/register in register_form?
Replies
8
Views
887
Snog
Snog
Top Bottom