• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

2 Ways To Add Icons To Buttons In Your Theme

In this tutorial i’ll provide all the HTML and CSS you can use to add different types of icons to your buttons in WordPress.

The most efficient method is to use the existing button class your theme supports with existing CSS rules.

Here’s the before and after shots:

add icon to button in wordpress

Create Standard Button

Here’s some basic HTML which you can paste in your text editor to create a standard button without icon:

And here’s what the above HTML code produces:

standard button

Pretty basic looking button which uses your themes default CSS to style the button as long as your themes button class is .button, otherwise change the button class in the HTML above.

Button With SVG Icon

This HTML includes a class for additional CSS which links to your SVG icon file you can upload to your child themes images folder.

And here’s what the above HTML code produces once you’ve also added the SVG file and CSS:

button with icon

Here’s the CSS code which you need to paste near the end of your child themes style sheet.

You can find SVG icon files online at most of the popular icon search engines.

Button Using Dashicon

This HTML includes a class for additional CSS which includes your choice of a large range of dashicons which are already included in the WordPress core.

And here’s what the above HTML code produces once you’ve also added the CSS:

dashicon button

Here’s the CSS code which you need to paste near the end of your child themes style sheet.

Button Code

Here’s some button code you might like to use rather than your themes existing code. The CSS includes the path to a SVG icon file in your images folder which you’ll need to choose and upload to include the download arrow in the button.

Here’s the button style the above code produces:

button style

Related Posts

  • How To Add A Button Anywhere In Your Theme

Reader Interactions

Comments

  1. Keith Davis says

    May 21, 2014 at 5:06 pm

    Useful Brad – you might find me using a few of these buttons.

    Log in to Reply
    • Brad Dalton says

      May 21, 2014 at 5:27 pm

      I added some button code at the end of the post which is a bit different than what StudioPress themes normally include.

      Log in to Reply
  2. J Mayu says

    May 21, 2014 at 4:36 pm

    Good stuff thanks.

    Log in to Reply
  3. bob says

    May 21, 2014 at 12:43 pm

    hi, is there a way of making the button the full width of the widget?

    Log in to Reply
    • Brad Dalton says

      May 21, 2014 at 1:04 pm

      You can add a width to the CSS.

      width: 300px;
      Log in to Reply
      • bob says

        May 21, 2014 at 1:41 pm

        thanks

        Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.