“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'자바 스크립트 문자열
@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>이것은 아마도 헛소리 일지 모르지만, 지금까지 아무도 "CSS 만 사용하여 닫기 버튼을 만드는 솔루션"을 제공 한 사람이 없습니다. 뿐. 여기 있습니다 :
#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
이것은 나를 위해 잘 작동합니다 :
<style>
a.closeX {
position: absolute;
right: 0px; top: 0px; width:20px;
background-color: #FFF; color: black;
margin-top:-15px; margin-right:-15px; border-radius: 20px;
padding-left: 3px; padding-top: 1px;
cursor:pointer; z-index: -1;
font-size:16px; font-weight:bold;
}
</style>
<div id="content">
<a class="closeX" id="closeX" onclick='$("#content").hide();'>✖</a>
Click "X" to close this box
</div>글꼴을 잊고 배경 이미지를 사용하십시오!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Select :after pseudo class/element</title>
<style type="text/css">
.close {
background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
text-indent:-10000px;
width:20px;
height:20px;
}
</style>
</head>
<body>
<input type="button" class="close" value="Close" />
<button class="close">Close</button>
</body>
</html>스크린 리더로 페이지를 방문하는 사용자가 더 쉽게 액세스 할 수 있습니다.
화면 판독기에서만 액세스 할 수있는 텍스트는 액세스 가능한 방식으로 숨길 수있는 범위에 배치하여 사용할 수 있습니다. 화면 판독기가 읽을 수없는 CSS에 x를 넣으면 혼동되지 않지만 페이지에 표시되며 키보드 사용자도 액세스 할 수 있습니다.
<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'\00d7'; color:red; font-size:2em;}
</style>
<button class="close"><span class="hidden">close</span></button>최신 브라우저를 사용하면 + 부호를 회전 할 수 있습니다.
.popupClose:before {
content:'+';
}
.popupClose {
position:relative;
float:right;
right:10px;
top:0px;
padding:2px;
cursor:pointer;
margin:2px;
color:grey;
font-size:32pt;
transform:rotate(45deg);
}그런 다음 필요한 곳에 다음 html을 배치하십시오.
<span class='popupClose'></span>
Lucida Sans Unicode하고Arial Unicode MS지원합니다. 일부 브라우저 (특히 오래된 IE)에서 이러한 문자를 지원하는 글꼴을 사용하지 않으면 지원되지 않는 기호를 나타내는 사각형 만 나타납니다. 그런 기호에 DejaVu를 제거했습니다.