css before에 아이콘 넣기
아이콘은 특수문자를 말한다.
css는 메인 css 이외에도 더 꾸밀 수 있는 Pseudo class가 존재한다.
익숙하게 알고 있는것도 있다.
이를테면 링크테그에 오버, 방문시,등이다
a:link
a:visited
a:hover 마우스 오버시 색 변경 효과
a:active
등등등 너무 많고 오늘은 before
자주 쓰는건 엘리먼트 앞쪽에 뭔가 아이콘등을 넣을때다.
태그 내용에 일일이 넣어도 되지만 뭔가 고정적으로 들어갈 때 쓰면 요긴하다
.aaa라는 클래스가 있다고 치자
.aaa:before {
content:'A';
}
<div class="aaa">
라라라
</a>
여기 앞에 특수문자를 다양하게 넣을 수 있다.
<style>
.aaa:before {
content:'◆';
}
</style>
<div class="aaa">
라라라
</a>
특수문자는 온라인에 찾아보면 많이 있다.
그와 별도로 유니코드나 svg도 넣을 수 있다. 유니코드는 \가 들어간다.
유니코드 백과사전이나 유니코드표를 쭉 살펴보고 그대로 기입을 하면 된다.
https://unicode-table.com/kr/sets/special-symbols/
특수 기호: • ° ♻ ☺ ★ «
이 사이트는 최고의 경험을 보장하기 위해 🍪쿠키를 사용합니다. 자세히보기 동의하기
unicode-table.com
유니코드는 U+로 시작한다 content에 쓰려면 \로바꾸면 된다.
U+00B0일경우 \00B0
<style>
.aaa:before {
content:'\2650';
}
</style>
<div class="aaa">
라라라
</a>
svg를 before에 넣는 방법. 예로 폰트어썸 같은 경우다.
폰트패밀리를 연결하고 일반적으로 쓸때는 아이콘별 클래스 태그를 쓰거나 svg를 태그에 위치시키면 된다.
그거 말고 걍 바로 before에 svg를 넣을려면? svg코드를 넣으면 css에 걸수있게 바꿔준다.
svg코드는 폰트어썸에서 복사할 수 있다.
https://yoksel.github.io/url-encoder/
<style>
.aaa2:before {
content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M159.7 237.4C108.4 308.3 43.1 348.2 14 326.6-15.2 304.9 2.8 230 54.2 159.1c51.3-70.9 116.6-110.8 145.7-89.2 29.1 21.6 11.1 96.6-40.2 167.5zm351.2-57.3C437.1 303.5 319 367.8 246.4 323.7c-25-15.2-41.3-41.2-49-73.8-33.6 64.8-92.8 113.8-164.1 133.2 49.8 59.3 124.1 96.9 207 96.9 150 0 271.6-123.1 271.6-274.9.1-8.5-.3-16.8-1-25z'/%3E%3C/svg%3E");
display:inline-blogk;
}
</style>
<div class="aaa2">
라라라
</a>
svg를 이용하면 재미 있는 기능을 수행할 수 있다
before뿐 아니라 after도 이용할 수 있다.