Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 7, 2021 at 3:13 pm #1309116
    Thedogscreative

    Hello helpful people. I was wondering if you could help.

    I’ve generated and imported a Fontello icon for use in buttons through the import/export Iconfont Manager option, which works well.

    I’ve installed the Contact Form 7 plugin and styled a form using CSS so it look the way I need it to.

    I’d like to use the Fontello icon in the WPCF7 ‘submit’ button.

    So far, the CSS for the button is:

    .wpcf7-submit, input[type="submit"]
{
    -webkit-appearance: none!important;
    font: 1em "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 100!important;
    font-size: 14px!important;
    text-transform: uppercase!important;
    color: #fff!important;
    background: #021d49!important;
    border-radius: 0px!important;
}

    I’ve read that if I want to insert the icon, I insert the unicode into the form itself like this (e800 being the code):

    [submit "Submit "]

    Then change the font in the button to:

    `font-family: Fontello !important;’

    This inserts the symbol. However, when I do this the font of the button reverts back to a default font, which is not the default font set for the site as a whole, and I know of no other way to change the font for the WPCF7 button other than through additional CSS. I obviously can’t insert two fonts in the class.

    So I can either get the icon to show with the word ‘submit’ in the wrong font, or I can get the font right but the icon doesn’t display – please see screenshots.

    Is there a way to get the word ‘submit’ styled right and insert the icon?

    Thanks in advance.

    contact form button style

    contact form button styling

    July 9, 2021 at 10:26 am #1309355
    Thedogscreative

    …Anyone…?

    July 10, 2021 at 9:02 pm #1309508
    Mike

    Hi,
    Thank you for your patience and the explanation, I tried to recreate this on a test page but since I didn’t have access to the custom Fontello font you are using I used the arrow icon in the theme
    2021-07-10_002.jpg
    Please note that while on mouse-over the charcode says \ue88d, in the css you will actually use \e88d droping the u.
    You will add the following code instead of [submit] in Contact Form 7:

    <!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="wpcf7-submit">Submit<span class='cf7icon'></span></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

    2021-07-10_003.jpg
    and then add this css for the icon:

    .cf7icon:after {
  content: " \e88d";
  font-family: entypo-fontello;
  color: #fff;
}

    you will want to adjust to suit for your icon, this was the result:
    2021-07-10_004.jpg
    Another option might be to use the Unicode character &rarr; in your submit button:
    2021-07-10_005.jpg
    it won’t be your custom font, but it will be an arrow:
    2021-07-10_006.jpg

    Best regards,
    Mike

    July 14, 2021 at 4:52 pm #1310136
    Thedogscreative

    Amazing. You’re a genius. Thank you. The first solution you put forward has worked perfectly.

    July 15, 2021 at 1:09 pm #1310275
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Insert Fontello icon in Contact Form 7 button’ is closed to new replies.