CSS3 icons — outline style

I wanted some icons for this site, but I wanted them to have single-pixel outlines, no matter what size. And, in some cases, I wanted to use two colors. So, I drew them in CSS.

Each icon is only one element (I usually use <i>, even though it’s not semantic. Let’s redefine that deprecated element as <icon>!). The pseudo :before and :after classes on the element give you a total of three things to style. It’s not really that much code, and it’s the only way you could do this super thin line at different sizes. (Of course you could vary the line weight, too.)

The only thing is that the rotation makes the bounding box and thus the floats a little weird. Maybe there’s a better way to do that?

Here’s a sample of the Sass. The mixins are from Bourbon. The rest of the icon code is in my new CSSlines icon repo.

%icon-arrow {
    display: block;
    position: relative;
    border-top: 1px solid $base7;
    border-right: 1px solid $base7;
    background: transparent;
    width: 32px;
    height: 32px;
    margin: 0;
    @include transform(rotate(45deg));
    @include transform-origin(center center);
    @include transition(border-color 0.25s ease-in-out);
    &:after {
        content: "";
        border-top: 1px solid $base7;
        width: 133%;
        height: 0;
        position: absolute;
        top: -1px;
        right: 0;
        @include transform(rotate(-45deg));
        @include transform-origin(right top);
        @include transition(border-color 0.25s ease-in-out);
    }
    &:hover,
    &:hover:after {
        border-color: $base2;
        cursor: pointer;
    }
}

.i-arrow-left {
    @extend %icon-arrow;
    @include transform(rotate(-135deg));
}