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:
Useful Brad – you might find me using a few of these buttons.
I added some button code at the end of the post which is a bit different than what StudioPress themes normally include.
Good stuff thanks.
hi, is there a way of making the button the full width of the widget?
You can add a width to the CSS.
thanks