It also allows placing the label (that is, the icon itself) anywhere in the DOM that makes it very flexible.
Compatible with IE11+ and Chrome/Firefox/Edge. I haven’t had a chance to check in Safari, please report if you find an issue.
- width: the width of the icon. default: 32px
- thickness: the thickness of the bars. default: 3px
- gap: the vertical space between the bars. Overall height is: thickness3 + gap2. default: 7px
- color: the color of the icons. default: #000 (black)
- radius: border-radius value to round edges. default: 0
- anim: seconds of animation duration (transition-duration) or timing function + duration (eg. “ease-out 0.3s”). default:0.25s
- labelselector: in case the label is not right after the checkbox, use this setting to tell the mixin where to find it. Eg. “~ div.content header nav label”. default: “+ label”
- padding: extra spacing around the icon. default: 0
- text: show text next to the icon, by default on the right. Values: “left” or false to disable. Requires an extra “span” tag. default: “right”
The demo contains links to the Sass, Stylus and LESS versions: