Using iconic in bootstrap buttons

[akiross]

Hello,
today I tried to use open-iconic inside a button in bootstrap v4. Problem is: when applying the class .oi, the button is slightly shifted downward (.oi has top: 1px in it). This is a bit of a problem when using .input-group-append or .input-group-prepend.

Example fiddle produces the following image (note the button shifted downward)

I also tried placing the text inside a <span> element, but this would raise another set of issues while using bootstrap. So, I merely added a CSS rule to my stylesheet:

.oi { top: 0px; }

This being said, I don't understand the purpose of having 1px offset on .oi classes, but I am suspecting that I should not be using things in this way, or that open-iconic shall remove that offset when used inside a button.

Thanks
best regards

[KlomDark]

I was able to fix it by changing it to:

.oi { margin-top: -1px; margin-bottom: 1px; }

See fiddle here

[dan-giddins]

I also have this issue! I have no idea why this is like this and it feels like the result of a hack somewhere to make something else work?

I think I will open a PR to have this fixed!

[dan-giddins]

Raised PR #55 to fix this

[e-coeur]

Same problem open-iconic with django-bootstrap4.
"top: 1px" T_T

[dan-giddins]

@e-coeur There doesn't seem to be any activity on this project, so I recommend just pulling and using my fix in my PR #55