Centering an icon in a button

Can somebody please tell me how to center the following icon in the middle of the bottom instead of at the bottom as it is now. I presume it can be done with classes but not sure which ones.

Thanking you
Sabinacentering icon

How did you create the button? Is it an icon brick that is being used as a button, or have you created a button and used an image icon as a background? Let us know what you have done and we’ll be able to offer a solution. Meanwhile, here is how I would do it.

Add a button to your page. Remove the label. Create a custom class and make the settings as shown in the illustration below. Start by adding an icon graphic to the background of the button (I used an svg icon from and dragged it into the image box). Set the height of the image to about 85%. Position centre-centre and no repeat. Select a colour for your button. Change to the metrics tab and set the button width and height to the size you want. It doesn’t matter what size you choose, the icon will grow with the button and will always be centred.

If you want a rollover effect, switch to the hover sate in the custom class and adjust the colour.

Sorry I wasn’t clearer. I created a standard button with icon selected. I chose this icon as I had done on a previous site and that is how it came out.

But as you can see from the screen shots, there is also a class attached to the button. “church.button”.

Well I tried the above and got this

I tried changing the icon and finally came across one that fits into the button aesthetically. Not particularly the one I had wanted but it will do. Its the bell one showing above. Of course, the former would have been better.

I don’t know why this icon didn’t work here as I had it on another site in exactly the same spot and didn’t have to change anything.

Thank you for your suggestion. I guess I must go back to my “icon” lessons to get learn some more.

Yes, some of the icons in Blocs (particularly feather icon) are not centred - see below. This results in them sitting off-centre in a button. The best thing to do is to use a different family of icons that do centre well or use the option from my first post (image icon as button background). Alternatively, you can select the icon in the button and apply some bottom padding in the class. This will change the size of the button and may not be an ideal solution. Personally, I would use the first solution I posted above. Almost all the icons that Blocs offers are available to download as svg or png from the flaticons website.

Screenshot 2020-06-18 at 12.09.23

Thank you for that information. Now I know about the “feather icons” it makes it all the easier. I have found an icon that suits the page and the theme. I didn’t want to play around with the settings of the button itself as the “church-button” class is used throughout the site and I feared that it would send them all of skew. Furthermore, I’m still not all that clued up about classes all told. Thanks again.
Solution found

PS Now I see that there is a similar cog icon in the Font Awesome section that sits nicely in the center.

1 Like