- 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 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.