Menu icon Foundation
Split Button with close icon instead of dropdown

I am trying to modify the foundation split button replace the dropdown icon and functionality with close icon and functionality. I could do it easily with bootstrap, but cannot figure out how to do it, or if it is even possible with foundation.

buttoncloseiconsplit button

I am trying to modify the foundation split button replace the dropdown icon and functionality with close icon and functionality. I could do it easily with bootstrap, but cannot figure out how to do it, or if it is even possible with foundation.

Sam Armstrong almost 5 years ago

Add this to your scss file

.split.button.no-pip
{
    span:before{
        border-style:none;
    }
    *{
        i:before{
            display: block;
            margin-top:50%;
        }
    }
}

or this to your css

.split.button.no-pip span:before {
  border-style: none;
}

.split.button.no-pip * i:before {
  display: block;
  margin-top: 50%;
}

then add no-pip next to your split class and replace the span with an icon element

<a class="button small split no-pip">Button Name<span ><i class="small fa" ></i><span></a>

Rafi Benkual almost 5 years ago

Right now, the arrow is created with an :after sudo-element. You can change the content there to an image or icon like so http://codepen.io/rafibomb/pen/yyJgqz