Title: Submit Button Icon with no text?
Last modified: March 29, 2020

---

# Submit Button Icon with no text?

 *  Resolved [scott74](https://wordpress.org/support/users/scott74/)
 * (@scott74)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/submit-button-icon-with-no-text/)
 * 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](https://imgur.com/a/Vo8sX25)
 * 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](https://wordpress.org/support/users/scott74/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsubmit-button-icon-with-no-text%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Contributor [Addons for Contact Form 7](https://wordpress.org/support/users/contactform7addons/)
 * (@contactform7addons)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/submit-button-icon-with-no-text/#post-12599424)
 * 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](https://wordpress.org/support/users/scott74/)
 * (@scott74)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/submit-button-icon-with-no-text/#post-12602129)
 * 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](https://wordpress.org/support/users/scott74/)
 * (@scott74)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/submit-button-icon-with-no-text/#post-12602661)
 * 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.

 * ![](https://s.w.org/plugins/geopattern-icon/material-design-for-contact-form-
   7_f8f8f8.svg)
 * [Material Design for Contact Form 7](https://wordpress.org/plugins/material-design-for-contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/material-design-for-contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/material-design-for-contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/material-design-for-contact-form-7/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [scott74](https://wordpress.org/support/users/scott74/)
 * Last activity: [6 years, 2 months ago](https://wordpress.org/support/topic/submit-button-icon-with-no-text/#post-12602661)
 * Status: resolved