CSS line-height property issue - html

Question

I incorporated a Material-Floating Button to my web page and the functionality is working perfectly the way I want it to. The only issue I am having is the icons I have set up for them are not appear centered but, appears at the top of the button. It appears that the css line-height is not working.
Image of what appears on my webpage: Icon at top of Button
Link for Material-Floating Button: Material-Floating Button
Link for Demo of where the icon should be at: Demo
HTML Code:
<ul class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<!-- the main menu button -->
<a href="#" class="mfb-component__button--main">
<!-- the main button icon visible by default -->
<i class="mfb-component__main-icon--resting ion-plus-round"></i>
<!-- the main button icon visible when the user is hovering/interacting with the menu -->
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<!-- a child button, repeat as many times as needed -->
<li>
<a href="#" data-mfb-label="Edit This Action" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-edit"></i>
</a>
</li>
</ul>
</li>
</ul>
Part of CSS Code:
.mfb-component__button--main, .mfb-component__button--child {
background-color: #E40A5D;
display: inline-block;
position: relative;
border: none;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
cursor: pointer;
outline: none;
padding: 0;
position: relative;
-webkit-user-drag: none;
color: #f1f1f1; }
/**
* This is the unordered list for the list items that contain
* the child buttons.
*
*/
.mfb-component__list {
list-style: none;
margin: 0;
padding: 0; }
.mfb-component__list > li {
display: block;
position: absolute;
top: 0;
right: 1px;
padding: 10px 0;
margin: -10px 0; }
/**
* These are the basic styles for all the icons inside the main button
*/
.mfb-component__icon, .mfb-component__main-icon--active,
.mfb-component__main-icon--resting, .mfb-component__child-icon {
position: absolute;
font-size: 18px;
text-align: center;
line-height: 56px;
width: 100%; }
.mfb-component__wrap {
padding: 25px;
margin: -25px; }

Answer 1

I think you're right about the line-height. Is there another css rule somewhere over-riding it?
Try adding and important to target it a bit better.
line-height: 56px !important;
If that doesn't work add some parent elements before you're css rule like #menu and .mfb-component__wrap
#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{
position: absolute;
font-size: 18px;
text-align: center;
line-height: 56px;
width: 100%; }
If neither of the above work just use 'top' as a workaround instead.
#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{
position: absolute;
font-size: 18px;
text-align: center;
line-height: 0px;
width: 100%;
top: 17px; }
Hope that sorts it for you!