CSS만으로 만든 주요 아이콘 모음

NO IMAGE

최근 이미지를 쓰지 않고 웹폰트를 이용해 아이콘을 표현하는 사이트가 많아졌습니다. 하지만, 몇 개의 아이콘을 쓰기 위해서 많은 아이콘이 들어있는 폰트파일을 불러오는 것도 좋다고만은 할 수 없겠지요. 이미지로 만들지도, 웹폰트를 전부 불러오지 않아도 아이콘을 CSS로 표현할 수 있다면 좋지 않을까요?

그런 이유로 자주 사용할 것 같은 아이콘을 몇 개 CSS로 표현 해 보겠습니다.

HTML은 전부 같습니다.

<span class="css-ooooo"></span>

css-ooooo라는 클래스명은 각 아이콘의 이름에 맞춥니다.

3개의 선 아이콘

먼저 최근 모바일 펼침메뉴로도 많이 사용되는 3개의 선으로 된 아이콘입니다. span요소로 가운데 선을, before요소로 위의 선, after요소로 아래의 선을 나타냅니다.

.css-bar {
    display: inline-block;
    position: relative;
    margin: 0 10px 3px 0;
    padding: 0;
    background: #000;
}
.css-bar, .css-bar:before, .css-bar:after {
    width: 18px;
    height: 3px;
}
.css-bar:before, .css-bar:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #000;
}
.css-bar:before { margin-top: -8px; }
.css-bar:after { margin-top: 4px; }
    

width, height의 수치를 변경하면 선의 크기가 바뀝니다. 선과 선의 간격은 margin-top의 수치로 변경할 수 있습니다. border-radius를 넣어 귀퉁이를 부드럽게 변형시켜도 좋을 것 같습니다.

파일 아이콘

파일모양의 아이콘입니다. before로 한쪽 귀퉁이의 접힌 부분의 선을, after로 접힌부분의 삼각형을 나타냅니다.

.css-file {
    display: inline-block;
    position: relative;
    top: 50%;
    width: 16px;
    height: 20px;
    margin: 0 10px 0 0;
    padding: 0;
    background: #000;
}
.css-file:before, .css-file:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
}
.css-file:before {
    width: 7px;
    height: 7px;
    background: #eee;
}
.css-file:after {
    width: 0;
    height: 0;
    border: 3px solid #eee;
    border-bottom-color: #000;
    border-left-color: #000;
}
    

after의 「#eee」는 배경색과 어울리도록 변경하면 됩니다. after의 크기는 선의 각3px, 6px가 됩니다. 접힌 부분의 크기를 바꿀 경우에는 수치를 계산하여 before가 더 큰 수치가 될 수 있도록 변경하면 되겠습니다.

메일 아이콘

편지봉투 모양의 아이콘입니다. 위의 파일 아이콘과 비슷한 형식입니다.before로 만든 하얀 삼각형의 위에, after로 만든 조금 작은 검정 삼각형을 올리면 됩니다.

.css-mail {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 16px;
    margin: 0 10px 0 0;
    padding: 0;
    background: #000;
}
.css-mail:before, .css-mail:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}
.css-mail:before {
    border: 10px solid transparent;
    border-top-color: #fff;
}
.css-mail:after {
    left: 2px;
    border: 8px solid transparent;
    border-top-color: #000;
}

크기를 변경하고 싶을 경우에는 span자체의 사각형과 before의 삼각형의 width를 맞춰주면 됩니다. border를 10px로 지정하면 삼각형의 크기는 20px이 되므로 주의하세요! after의 삼각형은 before보다 2px작게 설정합니다.

X마크 아이콘

transform: rotate(45deg);를 삭제하면 +마크가 됩니다.

.css-cancel {
    display: inline-block;
    position: relative;
    margin: 0 20px 0 7px;
    padding: 0;
    width: 4px;
    height: 20px;
    background: #000;
    transform: rotate(45deg);
}
.css-cancel:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 20px;
    height: 4px;
    margin-top: -2px;
    background: #000;
}

span요소와 before요소로 선 한개씩을 표현하고 있습니다. 본래의 요소를 동그라미로 만들어서, before, after로 두 선을 만들면 버튼처럼 표현할 수도 있을 것 같네요.

태그 아이콘

태그 아이콘입니다. span요소는 사각형, before요소는 하얀 동그라미, after는 삼각형을 표현하고 있습니다.

.css-tag {
    display: inline-block;
    position: relative;
    margin: 0 15px 0 0;
    padding: 0;
    width: 18px;
    height: 16px;
    background: #000;
}
.css-tag:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: #fff;
}
.css-tag:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #000;
}

크기를 변경하고 싶을 때는 삼각형이 되는 after의 보더 길이를 본체의 height의 절반으로 합니다. 동그라미를 키우는 경우에는 margin-top의 값에 주의!

화살표 아이콘

여기저기 활용하기 좋은 타입의 화살표입니다. after는 배경과 같은 색으로 하고, before의 위에 겹치도록 올리면 됩니다. 여기서는 after요소를 삼각형으로 해서 표현하고 있지만, 사각형으로 표현하는 방법도 있습니다.

.css-arrow {
    display: inline-block;
    position: relative;
    margin: 0 0 0 8px;
    padding: 0;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #000;
}
.css-arrow:before, .css-arrow:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.css-arrow:before {
    left: -30px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right-color: #000;
}
.css-arrow:after {
    left: -20px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left-color: #eee;
}

마치며

이상, 자주 사용할 것 같은 아이콘을 몇 개 CSS로 표현 해 보았습니다.만들려고 하면, CSS로 더 복잡한 아이콘도 만들 수 있겠지만, 너무 복잡한 CSS코드를 사용할 바에는웹폰트를 사용하는 편이 좋다고 생각하기 때문에, 간단한 표현으로 만들 수 있는 아이콘을 소개해보았습니다. 복사+붙여넣기로 사용하세요 ^^

CSS로 표현하는 간단한 아이콘을 소개했지만, 더 많이 보고 싶으신 분들을 위해 아래 사이트를 소개합니다.

CSS3 Icons

CSS3 Icons
http://www.uiplayground.in/css3-icons/

ICONO

ICONO
http://saeedalipoor.github.io/icono/

ne

ne div
http://one-div.com/