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:

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:

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:

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:

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:

Related Posts

• How To Add A Button Anywhere In Your Theme