"X" रद्द / बंद करने के लिए यूनिकोड वर्ण?

Question

मैं केवल CSS का उपयोग करके एक करीबी बटन बनाना चाहता हूं।

मुझे यकीन है कि मैं ऐसा करने वाला पहला नहीं हूं, तो क्या किसी को पता है कि किस फ़ॉन्ट की ऊंचाई के समान चौड़ाई 'x' है, ताकि इसे क्लोज़ बटन की तरह देखने के लिए क्रॉस-ब्राउज़र का उपयोग किया जा सके?

Answer 1

Well वास्तव में अच्छी तरह से काम करता है। एचटीएमएल कोड है ✖।

Comments

ध्यान दें कि आपको इस चरित्र का समर्थन करने वाले फ़ॉन्ट का उपयोग करना होगा। मुझे लगता है कि DejaVu उसके लिए अच्छा लग रहा है। मैं समझता हूं Lucida Sans Unicodeऔर Arial Unicode MSइस तरह के यूनिकोड प्रतीकों का भी समर्थन करता हूं । यदि आप कुछ ब्राउज़र (विशेष रूप से पुराने IE) पर इन वर्णों का समर्थन करने वाले फ़ॉन्ट का उपयोग नहीं करते हैं, तो आपको प्राप्त होने वाले सभी आयत असमर्थित प्रतीकों को इंगित करते हैं। मैं इस तरह के प्रतीकों के लिए डेजावू के एक नीचे छीन संस्करण का उपयोग करता हूं।

— पनजी

इसे 'हेवी

— मल्टिप्लक्शन

2 साल बाद, इस टिप्पणी ने मेरे प्रोजेक्ट को किक बना दिया कि मुझे गधे की अतिरिक्त मात्रा की तलाश थी!

— नॉमिनलएऑन

अब अगर केवल हम फायरफॉक्स 32.0 में रंग बदल सकते हैं, तो रंग सीएसएस सेट करते समय भी हमेशा लाल ही रहेगा

— Gerrit Brink

एक और (अधिक आकर्षक IMO) विकल्प है & # x2715;

— एंड्रयू हेंड्री

Answer 2

×HTML में, उसके लिए × -मार्क (गुणा चिह्न) का उपयोग करने के बारे में क्या ?

"X" (अक्षर) का उपयोग अक्षर X के अलावा और किसी चीज़ का प्रतिनिधित्व करने के लिए नहीं किया जाना चाहिए।

Comments

अपने तर्क के साथ जा रहे हैं - एक्स-बार भी केवल एक्स बार का प्रतिनिधित्व करना चाहिए। मैं कहूंगा कि या तो एक छवि का उपयोग करें या पास का शब्द।

— १०:५० पर १e

हाँ, यह भी सच है, मुझे पता है।

— हजा

"x" (अक्षर) का उपयोग एक्स अक्षर के अलावा किसी और चीज का प्रतिनिधित्व करने के लिए नहीं किया जाना चाहिए। - कौन कहता है? अगर thats सिर्फ तुम उसके पीछे तर्क क्या है। धन्यवाद

— वैलेन्टिन Kuzub

आप गुणन वर्ण '×' का भी उपयोग कर सकते हैं। इस सवाल से लिया गया ।

— कामिल सरना

सबसे अच्छा जवाब IMHO। मुझे लगता है कि सभी ब्राउज़र इसका समर्थन करेंगे और अगर बूटस्ट्रैप इसका उपयोग कर रहा है ... वे आमतौर पर सर्वोत्तम प्रथाओं का पालन करते हैं।

— रुई मरकज

Answer 3

× ×या ×(एक ही बात) U + 00D7 गुणन चिह्न

एक मजबूत फ़ॉन्ट वजन के साथ × एक ही चरित्र

---

⨯ ⨯U + 2A2F गिब्स उत्पाद

---

✖ ✖U + 2716 भारी गुणन चिह्न

---

यदि आप इसका समर्थन करते हैं तो इमोजी ji भी है। यदि आप नहीं करते हैं तो आपने एक वर्ग = देखा है❌

---

मैंने कोडपेन पर यह सरल कोड उदाहरण भी बनाया था जब मैं एक डिजाइनर के साथ काम कर रहा था, जिसने मुझे उसे दिखाने के लिए कहा था कि यह कैसा लगेगा जब मैंने पूछा कि क्या मैं आपके करीबी बटन को एक छवि के बजाय कोडित संस्करण के साथ बदल सकता हूं।

<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>

Answer 4

एचटीएमएल

✕ ✕ ✓ ✓
पर क्लिक करें ✖ ✖ ✔ ✔

✗ ✗
✘✘

× × ×

सीएसएस

यदि आप 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>

विभिन्न भाषाओं के लिए उदाहरणों का उपयोग करें :

• ✕ एचटीएमएल
• '\2715' सीएसएस जैसे:.clear:before { content: '\2715'; }
• '\u2715' जावास्क्रिप्ट स्ट्रिंग

Answer 5

Another एक और महान है जो बहुत मोटी नहीं है। HTML कोड ✕या 2715हेक्स में है।

Answer 6

जैसा कि @ हजा ने बताया कि समय प्रतीक का उपयोग किया जा सकता है। ट्विटर बूटस्ट्रैप मॉडल्स और अलर्ट जैसी सामग्री को खारिज करने के लिए एक करीबी आइकन के लिए मैप करता है ।

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

Comments

यह बताते हुए कि बूटस्ट्रैप इसका उपयोग करता है, लेकिन यह एक दोहराव वाला उत्तर है, यह @ हजा के जैसा ही है।

— रुई मार्केज

Answer 7

मैं फ़ॉन्ट विस्मयकारी पसंद करता हूँ: http://fortawesome.github.io/Font-Awesome/icons/

जिस आइकन की आपको तलाश है fa-times। इसका उपयोग करना जितना आसान है:

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

इधर उधर करना

Comments

यह एक सीएसएस समाधान नहीं है।

— रेनविस

@mevius यकीन नहीं है कि आप क्या कहना चाह रहे हैं? फ़ॉन्ट बहुत बढ़िया जावास्क्रिप्ट की आवश्यकता नहीं है और वे कर रहे हैं फोंट। ओपी पूछता है "कौन सा फ़ॉन्ट ..."।

— प्राग्रामर

Answer 8

यह शायद पैदल सेना है, लेकिन अभी तक किसी ने वास्तव में "केवल सीएसएस का उपयोग करते हुए एक करीबी बटन बनाने के लिए" समाधान नहीं दिया है। केवल। हेयर यू गो:

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg

Answer 9

यहां एक और उल्लेख नहीं किया गया है - अच्छा पतला - यदि आपको अपनी परियोजना के लिए इस तरह की आवश्यकता है: not

╳ or decimal: ╳

Answer 10

×और font-family: Garamond, "Apple Garamond";यह काफी अच्छा है। गारमोंड फ़ॉन्ट पतला और वेब सुरक्षित है

Answer 11

यह मेरे लिए अच्छी तरह से काम करता है:

<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();'>&#10006;</a>
    Click "X" to close this box
</div>

Answer 12

एक फ़ॉन्ट के बारे में भूल जाओ और एक पृष्ठभूमि छवि का उपयोग करें!

<!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>

यह स्क्रीन रीडर वाले पृष्ठ पर जाने वाले उपयोगकर्ताओं के लिए अधिक सुलभ होगा।

Answer 13

यह उन लोगों के लिए है जो अपना Xछोटा / बड़ा और लाल बनाना चाहते हैं !

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

सीएसएस:

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}

Answer 14

आप पाठ का उपयोग कर सकते हैं जो केवल स्क्रीन पाठकों के लिए उपलब्ध है इसे एक स्पैन में रखकर जो आप एक सुलभ तरीके से छिपाते हैं। सीएसएस में 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>

Answer 15

आधुनिक ब्राउज़रों का उपयोग करके आप एक + चिह्न घुमा सकते हैं:

.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>

Comments

या आप <i class = 'material-icons'> close </ i> (<head> <link href = " font.googleapis.com/icon?family=Material+Icons " rel = "स्टाइलशीट>> का उपयोग कर सकते हैं] )

— user1432181

Answer 16

×से बेहतर है ✖के रूप में ✖एज में अजीब व्यवहार और इंटरनेट एक्सप्लोरर (IE11 में परीक्षण किया गया)। इसे सही रंग नहीं मिलता है और इसे "इमोजी" द्वारा बदल दिया जाता है