I made a leftsided navigation bar that works very well, but I still can’t add any icons inside the buttons properly. Here is the code of the navigation bar in CodePen codepen.io/Eduardo-Trindade/pen/MWXMZvb

I tried adding the icons to the buttons, but it appears at the corner of it, not centered, and I couldn’t center it there.

CodePudding user response：

You can use flex in CSS and put them in the middle You can see in the following example:

Visit https://codepen.io/shayanafkane/pen/PoarVjG/

CodePudding user response：

The main reason behind this is that you are inserting the icons inside the span element. Insert the icons inside the tags and you are good to go.

The element span has the class toolkit making the icons appear at the corner. Try to have the icons, not inside the tooltip (span) class but instead inside the element. Use the flex property to get the image in the centre of the buttons.