Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1309116

    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




    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
    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;">

    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:
    Another option might be to use the Unicode character &rarr; in your submit button:
    it won’t be your custom font, but it will be an arrow:

    Best regards,


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


    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,

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