search

iconic / open-iconic

An open source icon set with 223 marks in SVG, webfont and raster formats
http://useiconic.com/open
Other
3.58k stars 421 forks source link

Using iconic in bootstrap buttons #34

Open akiross opened 6 years ago

akiross commented 6 years ago

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)

open-iconic-shift

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 commented 5 years ago

I was able to fix it by changing it to:

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

See fiddle here

dan-giddins commented 3 years ago

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? image I think I will open a PR to have this fixed!

dan-giddins commented 3 years ago

Raised PR #55 to fix this

e-coeur commented 2 years ago

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

dan-giddins commented 2 years ago

@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