Contact Form 7 icon classes

[orfin]

Hello,

on your Uplift demo site, you’re using custom classes that invoke nucleo icons as ::before pseudo-elements in Contact Form 7 text placeholders (so that form elements have icons). I see that some of those classes are “name” or “message”. Is there a list of all classes that are available in the theme? I wouldn’t want to guess.

On the other hand – I could create new ones myself but I’ll have to know character codes for particular icons in nucleo icons font. Is there a list of all nucleo icon icons and their codes to put in ‘content: “”‘ declaration?

[David Martin – Support]

Hi,

Those are automatically added to the CF7 name/email/textarea inputs. You would not need to use any custom CSS to get the same display.

Thanks.

[orfin]

This reply has been marked as private.

[David Martin – Support]

Remove the these form-01-, form-02-, form-03-, form-04- ect.

[orfin]

Ok, so they’re based on span class names. What keywords are there apart from name, email and message?

If I’d like to code my own variants based on Uplift CSS, how do I know the codes for content: “”; to be included in :before pseudo-element? I mean – how do I get proper font icon codes?

Thanks.

[David Martin – Support]

Hi,

The only ones we supply are name, email, subject and message.

You can make your own by copying ours, you can see the CSS in the main.css file starting from line 14894 of the theme. You can add your custom codes in Theme Options => Custom CSS.

Ex:

span.wpcf7-form-control-wrap.name:before {
	content: "\e94a";
	font-family: 'nucleo-interface';
	position: absolute;
	top: 10px;
	left: 15px;
	color: #999;
}
span.wpcf7-form-control-wrap.email:before {
	content: "\e92e";
	font-family: 'nucleo-interface';
	position: absolute;
	top: 10px;
	left: 15px;
	color: #999;
}
span.wpcf7-form-control-wrap.subject:before {
	content: "\e92c";
	font-family: 'nucleo-interface';
	position: absolute;
	top: 10px;
	left: 15px;
	color: #999;
}
span.wpcf7-form-control-wrap.message:before {
	content: "\e941";
	font-family: 'nucleo-interface';
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 15px;
	color: #999;
}

You can use these supplied icons: http://uplift.swiftideas.com/documentation/icon-mind-icons/ or http://www.swiftideas.com/forums/topic/nucelo-icons-list/#post-295075

[orfin]

Amazing, this is exactly what I need. Thank you very much indeed!

[David Martin – Support]

Great, glad to help you out!

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

Thanks,
David