[css] “X”에 대한 유니 코드 문자 취소 / 닫기?

Program / 글쓴이

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

✕ &#x2715; ✓ &#x2713;
✖ &#x2716; ✔ &#x2714;

✗ &#x2717;
✘&#x2718;

× &#x00d7; &times;

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>

스 니펫 확장

다른 언어에 대한 예제 사용 :

  • &#x2715; HTML
  • '\2715' 예를 들어 CSS :.clear:before { content: '\2715'; }
  • '\u2715' 자바 스크립트 문자열

답변

✕는 너무 두껍지 않은 또 다른 위대한 것입니다. HTML 코드는 &#10005;또는 271516 진수입니다.

답변

@Haza가 지적했듯이 시간 기호를 사용할 수 있습니다. Twitter Bootstrap 은이를 모달 및 경고와 같은 컨텐츠를 해제 하기위한 닫기 아이콘 에 매핑 합니다.

<button class="close">&times;</button>

답변

나는 Font Awesome을 선호합니다 : http://fortawesome.github.io/Font-Awesome/icons/

찾고있는 아이콘은 fa-times입니다. 다음과 같이 사용하는 것이 간단합니다.

<button><i class="fa fa-times"></i> Close</button>

여기에 바이올린