Submit Button Icon with no text?

  • Resolved scott74

    (@scott74)


    6 years, 2 months ago

    I am looking to only have an arrow right for the submit button but cannot figure out how to add an icon to the submit button. The plugin does not have a setting to add it. I tried hard coding by looking at the email text field icon I had there but did not work

    Also wanting to but this up right next the the email field with same height. Got rest of the form styled expect for this.

    Going for this look

    View post on imgur.com

    Appreciate any help getting the icon for submit. Can probably figure out the rest with spacing etc..

    PS.. This form is in the footer of the site

    Thanks.

    • This topic was modified 6 years, 2 months ago by scott74.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    6 years, 2 months ago

    Hi Scott,

    You should just be able to put the icon code into the submit button like this.

    [md-submit]
[submit "<i class='material-icons'>arrow_right</i>"]
[/md-submit]

    I haven’t tested that. If it doesn’t work, you may need to do it with JavaScript. Change your submit button to this…

    [submit class:submit-btn-arrow "Send"]

    Then add this JavaScript to your page. Your theme might have a custom JavaScript input, or you might know how to do it by editing child theme files. If not, use a plugin to add custom JavaScript.

    jQuery(document).ready(function() {
  setTimeout(function() {
    jQuery('.submit-btn-arrow').html('<i class="material-icons">arrow_right</i>');
  }, 500)
});

    Note I have left positioning, spacing etc up to you. This just gets the arrow into the send button.

    Thanks,
    Angus

    Thread Starter scott74

    (@scott74)

    6 years, 1 month ago

    Thank you, that worked… Can you tell me the CSS selectors to target to but the submit button right up against the email field with no space… Can seem to figure that out.

    There are quite a bit of CSS targets to customize everything. a back end interface would be cool for that to change colors of each element and see it visually for each form you are working on.:)

    Thread Starter scott74

    (@scott74)

    6 years, 1 month ago

    Use a negative margin on the button that seemed to work. Not sure if correct way of doing it but seems to be ok.

    A list of all the CSS selectors would be helpful for targeting little bit more complex stuff like hover , invalid etc.. states — Switch buttons etc..

    Cool plugin all in all though. Thank you…

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Submit Button Icon with no text?’ is closed to new replies.