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;
    }
}