Topic: border with floating button shifts icons
when i add a border to a floating button, the fontawesome icons are shift a few pixels.
what am i doing wrong?
Expected behavior icons should be centered
Actual behavior icons are shifted ~3px
Resources (screenshots, code snippets etc.)
css:
.pink-outline {
border: 2px solid #e91e63;}
html:
<a class="back-button btn-floating rotate-btn white pink-outline" data-card="card-0"><i class="fas fa-times" style="color: #e91363"></i></a>
Hi,
this is happening because the border moves an icon outside the button. You can use this code to fix that: https://mdbootstrap.com/snippets/jquery/marta-szymanska/710888.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.0
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No