[css] “X”에 대한 유니 코드 문자 취소 / 닫기?
CSS만을 사용하여 닫기 버튼을 만들고 싶습니다.
나는 이것이 처음이 아니라고 확신합니다. 누가 어떤 글꼴이 높이와 같은 너비의 ‘x’를 가지고 있는지 알고 있으므로 크로스 브라우저를 사용하여 닫기 버튼처럼 보일 수 있습니까?
답변
✖은 정말 잘 작동합니다. HTML 코드는 ✖입니다.
답변
×HTML에서 × 표시 (곱하기 기호) 를 사용하는 것은 어떻습니까?
“x”(문자)는 문자 X 이외의 다른 것을 나타내는 데 사용해서는 안됩니다.
답변
× ×또는 ×(같은 것) U + 00D7 곱셈 부호
강력한 글꼴 무게를 가진 동일한 문자 ×
⨯ ⨯U + 2A2F 깁스 제품
✖ ✖U + 2716 무거운 곱셈 부호
지원하는 경우 이모티콘 ❌도 있습니다. 당신이 방금 사각형을 보지 않았다면 =❌
또한 닫기 버튼을 이미지가 아닌 코딩 된 버전으로 바꿀 수 있는지 물었을 때 어떻게 보일지 묻는 디자이너와 함께 작업 할 때 Codepen 에서이 간단한 코드 예제를 만들었 습니다.
<ul>
<li class="ele">
<div class="x large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop large"><b></b><b></b><b></b><b></b></div>
<div class="x t large"><b></b><b></b><b></b><b></b></div>
<div class="x shift large"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop medium"><b></b><b></b><b></b><b></b></div>
<div class="x t medium"><b></b><b></b><b></b><b></b></div>
<div class="x shift medium"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop small"><b></b><b></b><b></b><b></b></div>
<div class="x t small"><b></b><b></b><b></b><b></b></div>
<div class="x shift small"><b></b><b></b><b></b><b></b></div>
<div class="x small grow"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x switch"><b></b><b></b><b></b><b></b></div>
</li>
</ul>답변
HTML
✕ ✕ ✓ ✓
✖ ✖ ✔ ✔
✗ ✗
✘✘
× × ×
CSS
CSS에서 위의 문자를 사용하려면 (예 : 의사 :before또는 :after의사) 이스케이프 된 \유니 코드 HEX 값을 사용하십시오 . 예를 들면 다음과 같습니다.
[class^="ico-"], [class*=" ico-"]{
font: normal 1em/1 Arial, sans-serif;
display: inline-block;
}
.ico-times:before{ content: "\2716"; }
.ico-check:before{ content: "\2714"; }<i class="ico-times"></i>
<i class="ico-check"></i>다른 언어에 대한 예제 사용 :
✕HTML'\2715'예를 들어 CSS :.clear:before { content: '\2715'; }'\u2715'자바 스크립트 문자열
답변
✕는 너무 두껍지 않은 또 다른 위대한 것입니다. HTML 코드는 ✕또는 271516 진수입니다.
답변
@Haza가 지적했듯이 시간 기호를 사용할 수 있습니다. Twitter Bootstrap 은이를 모달 및 경고와 같은 컨텐츠를 해제 하기위한 닫기 아이콘 에 매핑 합니다.
<button class="close">×</button>답변
나는 Font Awesome을 선호합니다 : http://fortawesome.github.io/Font-Awesome/icons/
찾고있는 아이콘은 fa-times입니다. 다음과 같이 사용하는 것이 간단합니다.
<button><i class="fa fa-times"></i> Close</button>