เลือกสัญลักษณ์ใน HTML / XHTML

279

เราจำเป็นต้องแสดงสัญลักษณ์เห็บ (✓หรือ✔) ภายในเว็บแอปภายในและต้องการหลีกเลี่ยงการใช้ภาพ

จะต้องเริ่มทำงานกับ IE 6.0.2900 บนกล่อง XP โดยพื้นฐานแล้วเราต้องใช้มันข้ามเบราว์เซอร์ (IE + FF รุ่นล่าสุด)

กล่องแสดงต่อไปนี้จะตั้งค่าการเข้ารหัสเบราว์เซอร์เป็น UTF-8 (META ทำงานได้ดีและไม่ใช่ปัญหา) แบบอักษรเริ่มต้นคือ Times New Roman (อาจเป็นปัญหา แต่การลอง Lucida Sans Unicode ไม่ได้ช่วยและฉันไม่ได้ติดตั้ง Arial Unicode MS หรือติดตั้ง Lucida Grande)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

ความช่วยเหลือใด ๆ ชื่นชม

งานต่อไปนี้ภายใต้ IE 6.0 และ IE 7:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

ฉันจะขอบคุณถ้ามีใครสามารถตรวจสอบภายใต้ FF บน Windows ฉันค่อนข้างมั่นใจว่ามันจะไม่ทำงานบนกล่องที่ไม่ใช่ Windows

html xhtml

— วลาดกดิม
แหล่งที่มา

1

สัญลักษณ์เห็บควรมีลักษณะอย่างไร

— John Feminella

คุณเคยเห็นสิ่งนี้ไหม

— Sam Hasler

2

แซมโปรดดูคำถาม

— Vlad Gudim

@Totophil ฉันรู้ว่ามันพูดถึงเอนทิตีเดียวกัน แต่ก็ยังแนะนำให้เซิร์ฟเวอร์ส่งส่วนหัว HTTP จริง Content-Type: text / html; charset = utf-8 เช่นเดียวกับปัญหาที่ตัวอักษรที่ใช้อาจไม่มี ร่ายมนตร์สำหรับตัวละครที่ใช้

— Sam Hasler

ต่อไปนี้เป็นคู่: amp-what.com/#q=check%20mark & # x2713 & # x2714

— ndp

454

ฉันคิดว่าคุณกำลังใช้ค่า Unicode ที่ได้รับการสนับสนุนน้อยซึ่งไม่ได้มีสัญลักษณ์สำหรับจุดรหัสทั้งหมดเสมอไป
ลองใช้ตัวอักษรต่อไปนี้:

☐ ( 0x2610ในเลขฐานสิบหกของ Unicode [ทศนิยมทศนิยม HTML: ☐]): ช่องทำเครื่องหมายว่าง (ไม่ทำเครื่องหมาย)
☑ ( 0x2611 [ทศนิยม HTML: ☑]): รุ่นที่ทำเครื่องหมายในช่องทำเครื่องหมายก่อนหน้า
✓ ( 0x2713 [ทศนิยม HTML: ✓])
✔ ( 0x2714 [ทศนิยม HTML: ✔])

แก้ไข:ดูเหมือนจะมีความสับสนเกี่ยวกับสัญลักษณ์แรกที่นี่☐ / 0x2610 นี่คือช่องทำเครื่องหมายว่างเปล่า (ไม่ถูกตรวจสอบ) ดังนั้นหากคุณเห็นกล่องนั่นเป็นวิธีที่ควรจะมีลักษณะ มันเป็นสิ่งที่เทียบเท่ากับ☑ / 0x2611 ซึ่งเป็นรุ่นที่ตรวจสอบแล้ว

— John Feminella
แหล่งที่มา

1

การตั้งค่าระดับองค์กร: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

— Vlad Gudim

ที่แรกก็คือกล่องสำหรับฉันที่เหลือทำงานได้ดี แม้ว่าฉันจะใช้ภาพแทน แต่เพื่อความแน่ใจ

— mbillard

6

เพื่อให้ชัดเจนภาพแรกควรจะเป็นกล่อง - เป็นช่องว่าง!

— John Feminella

1

@Totophil: อ่าโอเค ฉันใช้ Ubuntu และฟอนต์ sans เริ่มต้นที่ฉันกำหนดค่าใน FF มีร่ายมนตร์เหล่านี้ ใน Windows เพียงใช้ผังอักขระเพื่อค้นหาร่ายมนตร์เหล่านี้และดูว่าแบบอักษรที่คุณต้องการมี ถ้าไม่คุณจะต้องเลือกคนอื่น

— John Feminella

5

รหัสทศนิยมของช่องว่าง: 0x2610 -> 9744 ดังนั้นโค้ด HTML จะมีลักษณะคล้าย☐กับกล่องที่เลือก: 0x2611 -> 9745 และรหัส HTML☑

— Vikas

272

ก่อนอื่นคุณควรตระหนักว่าคุณไม่จำเป็นต้องใช้เอนทิตี HTML - ตราบใดที่การเข้ารหัสเอกสาร HTML ของคุณถูกประกาศอย่างถูกต้องเป็น UTF-8 คุณสามารถคัดลอก / วางสัญลักษณ์เหล่านี้ลงในไฟล์ / สคริปต์ฝั่งเซิร์ฟเวอร์ / JavaScript / สิ่ง

ต้องบอกว่าต่อไปนี้เป็นรายการที่ครบถ้วนสมบูรณ์ของหน่วยงาน UTF-8 ที่เกี่ยวข้องทั้งหมด / เอนทิตี HTMLที่เกี่ยวข้องกับหัวข้อนี้:

☐ (ฐานสิบหก: ☐/ ธันวาคม:): ☐กล่องลงคะแนน (ว่างนั่นคือวิธีที่ควรจะเป็น)
☑ (ฐานสิบหก: ☑/ ธันวาคม:): ☑กล่องลงคะแนนพร้อมเช็ค
☒ (ฐานสิบหก: ☒ / ธันวาคม:): ☒กล่องลงคะแนนพร้อม x
✓ (ฐานสิบหก: ✓/ ธันวาคม:): ✓เครื่องหมายถูกเทียบเท่ากับ&checkmark;และ&check;ในเบราว์เซอร์ส่วนใหญ่
✔ (ฐานสิบหก: ✔ / ธันวาคม:): ✔เครื่องหมายถูกหนัก
✗ (ฐานสิบหก: ✗ / dec:) ✗: ballot x
✘ (ฐานสิบหก: ✘ / ธันวาคม:): ✘บัตรลงคะแนนหนัก x
🗸 (⚠ hex: 🗸 / ธันวาคม🗸): เครื่องหมายถูกแสง (รองรับไม่ดี ณ ปี 2560)
✅ (⚠ hex: ✅ / dec✅เครื่องหมายสีขาวหนัก (รองรับแบบผสมตั้งแต่ปี 2017)
🗴 (⚠ hex: 🗴 / dec🗴 : ballot script X (รองรับได้ไม่ดีจนถึงปี 2560)
🗶 (⚠ hex: 🗶 / dec🗶สคริปต์ตัวหนา X (รองรับได้ไม่ดีจนถึงปี 2560)
⮽ (⚠ hex: ⮽ / ธันวาคม⮽กล่องลงคะแนนพร้อมไฟ X (รองรับไม่ดีจนถึงปี 2560)
🗵 (⚠ hex: 🗵 / dec🗵กล่องลงคะแนนพร้อมสคริปต์ X (รองรับได้ไม่ดีจนถึงปี 2560)
🗹 (⚠ hex: 🗹 / ธันวาคม:🗹กล่องลงคะแนนที่มีตัวหนา (ไม่สนับสนุนตั้งแต่ 2017)
🗷 (⚠ hex: 🗷/ dec :): 🗷กล่องลงคะแนนพร้อมตัวหนาสคริปต์ X (รองรับได้ไม่ดีเท่าปี 2560)

ตรวจสอบแบบอักษรเว็บสำหรับสัญลักษณ์เห็บ? นี่คือตัวอย่างที่พร้อมใช้งานสำหรับคนทั่วไป: A☐B☑C☒D✓E✔F✗G✘H- เพียงแค่คัดลอก / วางลงในกล่องข้อความตัวอย่างของผู้ให้บริการ webfont ของคุณและดูว่าแบบอักษรใดที่รองรับสัญลักษณ์ติ๊ก

— Bogdan Stăncescu
แหล่งที่มา

17

เครื่องไคลเอนต์ต้องการแบบอักษรที่เหมาะสมที่มีสัญลักษณ์สำหรับอักขระนี้เพื่อแสดง แต่ Times New Roman ไม่ได้ ลองใช้Arial Unicode MSหรือLucida Grandeแทน:

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

สิ่งนี้ใช้ได้กับฉันใน Windows XP ใน IE 5.5, IE 6.0, FF 3.0.6

— ต้นกระเจี๊ยบ
แหล่งที่มา

ไม่ได้รับทั้งตัวอักษรเพียง Lucida Sans Unicode ที่อยู่ห่างไกลดูเหมือนว่าตัวอักษร unicode แต่ไม่มีเห็บ

— Vlad Gudim

font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grandeแล้วรายการแบบอักษรบางอย่างที่มีสัญลักษณ์สำหรับตัวนี้:

— Gumbo

ต้นกระเจี๊ยบไม่ทำงาน นอกจากนี้ฉันไม่ได้ติดตั้ง Arial Unicode MS และ Lucida Grande

— Vlad Gudim

มันใกล้เท่าที่คุณจะได้รับ แต่น่าเสียดายที่ Lucida Sans Unicode ไม่ได้จัดหา U + 2713/2714

— bobince

13

ปกติฉันจะใช้แบบอักษร fontawesome ( http://fontawesome.io/icon/check/ ) คุณสามารถใช้มันในไฟล์ html:

 <i class="fa fa-check"></i>

หรือใน css:

content: "\f00c";
font-family: FontAwesome;

— สเตฟาน
แหล่งที่มา

11

ทำไมคุณไม่ใช้องค์ประกอบช่องทำเครื่องหมายอินพุต HTML ในโหมดอ่านอย่างเดียว

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

ฉันคิดว่ามันจะใช้ได้กับทุกเบราว์เซอร์

— Drejc
แหล่งที่มา

6

เราไม่ต้องการการควบคุมเพียงแค่การบ่งชี้ว่ามีตัวเลือกบางอย่างอยู่ภายในเมทริกซ์ การใช้ตัวควบคุมที่ถูกปิดใช้งานจะผิดในกรณีนี้

— Vlad Gudim

11

ฉันพบปัญหาเดียวกันและไม่มีข้อเสนอแนะใด ๆ (Firefox บน Windows XP)

ดังนั้นฉันจึงพบวิธีแก้ปัญหาที่เป็นไปได้โดยใช้ข้อมูลภาพเพื่อแสดงเครื่องหมายถูกเล็กน้อย:

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

แน่นอนคุณสามารถสร้างภาพเครื่องหมายถูกและใช้ตัวแปลงเพื่อเพิ่มเป็น data: image / gif หวังว่านี่จะช่วยได้

— ไก่ Noack
แหล่งที่มา

8

แม้ว่าตั้งค่าการเข้ารหัสเบราว์เซอร์เป็น UTF-8

(หากคุณกำลังใช้การอ้างอิงอักขระตัวเลขแน่นอนไม่สำคัญว่าการเข้ารหัสจะถูกใช้งานอย่างไรเบราว์เซอร์จะได้รับรหัส Unicode ที่ถูกต้องจากหมายเลขโดยตรง)

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

ฉันจะขอบคุณถ้ามีใครสามารถตรวจสอบภายใต้ FF บน Windows ฉันค่อนข้างมั่นใจว่ามันจะไม่ทำงานบนกล่องที่ไม่ใช่ Windows

ล้มเหลวสำหรับฉันใน Firefox 3, Opera และ Safari อยากรู้อยากเห็นทำงานในเบราว์เซอร์ Webkit อื่น ๆ Chrome ล้มเหลวบน Linux ด้วย (เห็นได้ชัดว่าไม่ได้ติดตั้ง Wingdings ไว้ในนั้นติดตั้งบน Macs แต่นั่นไม่ได้ช่วยอะไรคุณถ้า Safari ไม่มี)

นอกจากนี้ยังเป็นแฮ็คที่น่ารังเกียจ - ตัวละครนั้นมีจุดประสงค์และวัตถุประสงค์ทั้งหมด“ ü” และจะปรากฎวิธีการต่าง ๆ เช่นเครื่องมือค้นหาหรือถ้าข้อความถูกคัดลอกและวาง คะแนนโค้ด Unicode ที่ถูกต้องเป็นวิธีที่จะไปหากคุณไม่มีทางเลือกอื่น

ปัญหาคือไม่มีฟอนต์ที่มาพร้อมกับอุปกรณ์ Windows U + 2713 CHECK MARK ('✓') สิ่งเดียวที่คุณน่าจะพบในเครื่อง Windows คือ "Arial Unicode MS" ซึ่งไม่น่าเชื่อถือ ดังนั้นในที่สุดฉันคิดว่าคุณจะต้อง:

ใช้อักขระอื่นที่รองรับได้ดีกว่า (เช่น '●' - bulletตามที่ใช้โดย SO) หรือ
ใช้รูปภาพโดยใช้ '✓' เป็นข้อความแสดงแทน

— bobince
แหล่งที่มา

8

มางานปาร์ตี้ช้ามากฉันพบว่า&check;(✓) ทำงานใน Opera ฉันไม่ได้ทดสอบกับเบราว์เซอร์อื่น ๆ แต่อาจมีประโยชน์สำหรับบางคน

— ซัม
แหล่งที่มา

4

น่าสังเกตว่า&check;(และ&checkmark;) ทั้งคู่ประเมิน✓ซึ่งเป็นสิ่งที่คำตอบยอดนิยมใช้ เป็นเอนทิตีอักขระ HTML5 และจะไม่ทำงานใน IE6

— James Donnelly

5

.className {
   content: '\&#x2713';
}

การใช้คุณสมบัติเนื้อหา CSS คุณสามารถแสดงเครื่องหมายด้วยรูปภาพหรือรหัสอื่น ๆ

— S-sharma
แหล่งที่มา

ไม่แน่ใจว่า: w3schools.com/cssref/pr_gen_content.aspแสดงอย่างเป็นทางการด้วย firefox

— s-sharma

todomvc.com/labs/architecture-examples/reactตรวจสอบว่ามันใช้งานได้หรือไม่ตามที่ใช้เนื้อหาสำหรับเครื่องหมายถูก

— s-sharma

4

หากคุณต้องการใช้รหัส utf-8 ในเนื้อหา css วิธีนี้เป็นไปได้:.class{ content: "\2713"; }

— Morteza Ziyae

4

√ (สัญลักษณ์รากที่สอง & # 8730;) เพียงพอหรือไม่

หรือตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าContent-Type:ส่วนหัวก่อนส่งข้อมูลไปยังเบราว์เซอร์ การระบุ<meta>แท็กประเภทเนื้อหาเพียงอย่างเดียวอาจไม่เพียงพอที่จะสนับสนุนให้เบราว์เซอร์ใช้ชุดอักขระที่ถูกต้อง

— เอียนเคมพ์
แหล่งที่มา

ขอบคุณ! สแควร์รูททำงานได้ แต่ดูเหมือนว่า errr ... สแควร์รูท? แต่ฉันเดาว่าไม่มีทางเลือกอื่นที่น่าจะใกล้เคียงที่สุดเท่าที่จะเป็นไปได้

— Vlad Gudim

1

Btw ระบุเมตาแท็กตั้งค่า UTF-8 อย่างดีบน IE ของฉันดังนั้นในกรณีนี้ไม่ใช่ปัญหา

— Vlad Gudim

1

รากที่สองคือรากที่สองและเครื่องหมายถูกคือเครื่องหมายถูก รู้สึกเหมือนกับว่าฉันเอารูปสัญลักษณ์ของห้องน้ำไปที่ประตูห้องเปลี่ยนเสื้อผ้า

— Volker E.

1

@VolkerE แต่นั่นจะเป็นเฮฮา!

— Dave Newton

3

โซลูชันที่ใช้ Wingdings ซึ่งไม่ได้เป็นแบบยูนิโค้ดและไม่ทำงานใน Linux หากไม่ได้ติดตั้ง Wingdings

Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒

Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑

Cross
<div style="font-family: Wingdings;">ý</div> ✗

Check
<div style="font-family: Wingdings;">þ</div> ✓

— Nishant
แหล่งที่มา

0

คุณสามารถใช้⊕หรือ⊗

— กาเบรียลโซโลมอน
แหล่งที่มา

1

สิ่งเหล่านี้ไม่ได้เป็นสัญญาณติ๊กพวกมันมีวงกลมบวก / ลบ

— GKFX

0

คุณสามารถเพิ่มสีขาวเล็กน้อยด้วย GIF ที่เข้ารหัส Base64 (ตัวสร้างออนไลน์ได้ที่นี่ ):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

ยกตัวอย่างเช่นฉันใช้ Chrome เพื่อจัดรูปแบบการควบคุมช่องทำเครื่องหมาย:

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

หากคุณต้องการมันในแท็ก IMG คุณจะทำเครื่องหมายถูก / เครื่องหมายเป็น:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">

— Volomike
แหล่งที่มา

0

ใช้WebDingหรือWingDingอักษรเป็นวิธีเดียวที่จะบรรลุเป้าหมายของหัวข้อนี้: มันมีการทำงานที่เริ่มต้นด้วย IE 6.0.2900 ดังนั้นฉันจะโพสต์ที่นี่เช่นเดียวกับการแก้ไขบางอย่างเพื่อโพสต์ข้างต้น:

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span>

ขยายตัวอย่างข้อมูล

อ้างอิงที่นี่: wingdings webdings

— Dmitry Babich
แหล่งที่มา