Trying to replicate CF7 Nucleo icons on before class

[Amber Needler]

Hi,

I am trying to replicate the way you guys have added the Nucleo icons on a before class with CF7 forms. I feel I have done everything the same but it’s showing a square box. Can you help please? 🙂

Thanks,

Amber

[David Martin – Support]

HI Amber,

Use the Chrome web inspector to compare what we have done vs what you are doing, you debug this then.

The term square box does not relate to any web element, what do you refer to? – Ex, maybe you mean a Textarea? I cannot view your page even if logged in.

[Amber Needler]

Hi,

I have done that, yet it just doesn’t work.

You need to go to the back end and go to pages then click the link to view, that’s how I do it?

In regards to the square – please see screenshot.

Thanks,

Amber

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

That method does not work for my login, other forum mods you need to preview it.

You mean the telephone input type or the submit button?

For example the telephone would be:

span.wpcf7-form-control-wrap.telephone:before {
    content: "\e96c";
    font-family: 'nucleo-interface';
    position: absolute;
    top: 10px;
    left: 15px;
    color: #999;
}

However is showing a square which actually means the icon code is wrong. What icon are you trying to use?

[Amber Needler]

Yeah I mean the telephone input field, the code I had used is:

span.wpcf7-form-control-wrap.telephone:before {
content: “\e96c”;
font-family: ‘nucleo-interface’;
position: absolute;
top: 10px;
left: 15px;
color: #999;
}

Please see screenshot for the icon I wanted to use, highlighted in blue.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Ah yes, that is a different font family: font-family: 'nucleo-general';

span.wpcf7-form-control-wrap.telephone:before {
content: "\e96c";
font-family: 'nucleo-general';
position: absolute;
top: 10px;
left: 15px;
color: #999;
}

[Amber Needler]

Ahhhh yes! Thank you 🙂

[David Martin – Support]

Glad to help!