폰트어썸 아이콘 배경그림으로 사용하기

Font Awesome icon as background image
폰트어썸 아이콘 배경그림으로 사용하기

1 예시[ | ]

필요에 따라 .my-box의 width, height, background, .my-box:after의 content, font-size, color를 조정하여 사용

html
Copy
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style>
.my-box {
    width: 400px; height: 300px;
    background: #eee;
    position: relative;
}
.my-box:after {
    content:"\f17c";
    font-size: 16em;
    color: silver;
    z-index: 1;
    font-family: FontAwesome;
    position: absolute;
    top: 50%; left: 50%;
    margin: -.48em -.42em;
}
.my-box div {
    z-index: 2;
    position: relative;
}
</style>

<div class="my-box">
    <div>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</div>
</div>

2 같이 보기[ | ]

3 참고[ | ]