Need symbols, and can't be bothered to embed images or icon fonts ? Why not draw these directly with CSS ? The power of LESS brings you arrows and the burger (menu) icon more easily than ever !
.arrow-up(@size, @color) { border-top: none; border-right: @size solid transparent; border-bottom: @size solid @color; border-left: @size solid transparent; } .arrow-right(@size, @color) { border-top: @size solid transparent; border-right: none; border-bottom: @size solid transparent; border-left: @size solid @color; } .arrow-down(@size, @color) { border-top: @size solid @color; border-right: @size solid transparent; border-bottom: none; border-left: @size solid transparent; } .arrow-left(@size, @color) { border-top: @size solid transparent; border-right: @size solid @color; border-bottom: @size solid transparent; border-left: none; } .burger(@width, @thickness, @gutter, @color) { display: inline-block; vertical-align: middle; position: relative; width: @width; height: @thickness * 3 + @gutter * 2; border-width: @thickness 0; border-style: solid; border-color: @color; &:after { content: ''; position: absolute; top: @gutter; left: 0; width: @width; height: @thickness; background-color: @color; } }