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

securedme
  • Solved
XF 2.2 custom user fields always shown in Registration form?
Replies
3
Views
302
TPerry
TPerry
Gleedo
  • Question Question
XF 2.2 Q and A added but not in registration form
Replies
2
Views
775
Gleedo
Gleedo
maszd
  • Solved
XF 2.2 Add a text below email in registration form
Replies
1
Views
444
Paul B
P
shyam123
  • Question Question
XF 2.0 Show "Website" Field in Registration Form
Replies
3
Views
494
Russ
Russ
oman
  • Question Question
XF 1.5 Validation on custom fields in registration form
Replies
0
Views
382
oman
oman
Back
Top Bottom