"এক্স" বাতিল / বন্ধ করার জন্য ইউনিকোড চরিত্র?

Question

আমি কেবল সিএসএস ব্যবহার করে একটি ঘনিষ্ঠ বোতাম তৈরি করতে চাই।

আমি নিশ্চিত যে আমি এটি করা প্রথম নই, সুতরাং যে কোনও ফন্টের 'x' উচ্চতা হিসাবে একই প্রস্থ রয়েছে তা কি কেউ জানতে পারে, যাতে এটি একটি ঘনিষ্ঠ বোতামের মতো দেখতে ক্রস ব্রাউজার ব্যবহার করতে পারে?

Answer 1

Really সত্যিই ভাল কাজ করে। এইচটিএমএল কোডটি হল ✖।

Comments

মনে রাখবেন যে আপনাকে এই অক্ষরটি সমর্থন করে এমন একটি ফন্ট ব্যবহার করতে হবে। আমি মনে করি দেজাভু এর জন্য দুর্দান্ত দেখাচ্ছে। আমি মনে করি Lucida Sans Unicodeএবং Arial Unicode MSএ জাতীয় ইউনিকোড প্রতীকগুলি সমর্থন করি । আপনি যদি এমন কোনও ফন্ট ব্যবহার না করেন যা কিছু ব্রাউজারগুলিতে এই অক্ষরগুলিকে সমর্থন করে (বিশেষত পুরাতন আইই) আপনি যা পাবেন তা হ'ল অসমর্থিত প্রতীকগুলিকে নির্দেশকারী আয়তক্ষেত্রগুলি। আমি এই জাতীয় প্রতীকগুলির জন্য দেজাভুর স্ট্রিপড ডাউন সংস্করণ ব্যবহার করি।

— পানজি

এটা 'মোটা গুণচিহ্ণ x' বলা হয় আমি বিশ্বাস করি - fileformat.info/info/unicode/char/2716/index.htm

— eipark

2 বছর পরে, এই মন্তব্যটি আমার প্রজেক্টটিকে কিক করেছে যে আমি যে অতিরিক্ত পরিমাণ গাধাটি খুঁজছিলাম!

— নামিমনএওন

এখন কেবলমাত্র আমরা যদি ফায়ারফক্স 32.0 এ রঙ পরিবর্তন করতে পারি তবে রঙ CSS নির্ধারণ করার সময়ও এটি সর্বদা লাল

— জেরিট ব্রিংক

আর একটি (আরও আকর্ষণীয় আইএমও) বিকল্প হ'ল & # x2715;

— অ্যান্ড্রু হেন্ডরি

Answer 2

×-চিহ্ন (গুণ চিহ্ন) ব্যবহার সম্পর্কে কী, × জন্য এইচটিএমএল- ?

"x" (চিঠি) এক্স বর্ণ বাদে অন্য কোনও কিছুর প্রতিনিধিত্ব করতে ব্যবহার করা উচিত নয়

Comments

আপনার যুক্তি দিয়ে যাচ্ছেন - এছাড়াও এক্স-বার শুধুমাত্র এক্স বার উপস্থাপন করা উচিত। আমি বলব হয় হয় কোনও চিত্র ব্যবহার করুন বা শব্দটি বন্ধ করুন।

— ইজিউই

হ্যাঁ, এটিও সত্য, আমি জানি।

— হাজা

"এক্স" (চিঠি) এক্স অক্ষর অন্য যে কোনও কিছু উপস্থাপন করতে ব্যবহার করা উচিত নয়। - এটা কে বলেছে? যদি এটির পিছনে যুক্তিটি আপনার পক্ষে ঠিক থাকে। ধন্যবাদ

— ভ্যালেন্টিন কুজুব

আপনি গুণক অক্ষর '×' ব্যবহার করতে পারেন। এই প্রশ্ন থেকে নেওয়া ।

— কামিল সারনা

সেরা উত্তর আইএমএইচও। আমি মনে করি সমস্ত ব্রাউজারগুলি এটি সমর্থন করবে এবং যদি বুটস্ট্র্যাপ এটি ব্যবহার করে ... তারা সাধারণত সেরা অনুশীলনগুলি অনুসরণ করে।

— রুই মার্কস

Answer 3

× ×বা ×(একই জিনিস) ইউ + 00D7 গুণ চিহ্ন

A শক্ত অক্ষরের ওজন সহ একই চরিত্র character

---

⨯ ⨯U + 2A2F গীবস পণ্য

---

✖ ✖U + 2716 ভারী গুণ চিহ্ন

---

একটি ইমোজিও রয়েছে you আপনি যদি এটি সমর্থন করেন। আপনি যদি না দেখেন তবে কেবল একটি বর্গ = দেখেছেন saw❌

---

আমি কোডেপেনে এই সাধারণ কোড উদাহরণটিও তৈরি করেছি যখন আমি এমন একজন ডিজাইনারের সাথে কাজ করছিলাম যিনি আমাকে জিজ্ঞাসা করেছিলেন যে আমি যখন একটি চিত্রের পরিবর্তে কোডেড সংস্করণ দিয়ে আপনার ঘনিষ্ঠ বোতামটি প্রতিস্থাপন করতে পারি তবে তার চেহারাটি কেমন হবে তা দেখাতে বলুন।

<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

এইচটিএমএল

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘✘

× × ×

সিএসএস

আপনি যদি সিএসএস থেকে উপরের অক্ষরগুলি ব্যবহার করতে চান (যেমন: একটি :beforeবা :afterসিউডোতে) কেবল পালানো \ইউনিকোড এইচএক্স মানটি ব্যবহার করুন , উদাহরণস্বরূপ:

[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 হ'ল আরেকটি দুর্দান্ত যা খুব ঘন নয়। এইচটিএমএল কোড ✕, বা 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

এটি কোনও সিএসএস সমাধান নয়।

— রিনিভিয়াস

@ মভিয়াস নিশ্চিত না আপনি কী বলার চেষ্টা করছেন? ফন্ট জট্টিল জাভাস্ক্রিপ্ট প্রয়োজন হয় না এবং তারা হয় ফন্ট। ওপি জিজ্ঞাসা করে "কোন হরফ ..."।

— প্রোগ্রাহামার

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

এখানে অন্য একটি উল্লেখ করা হয়নি - চমৎকার পাতলা - আপনার প্রকল্পের জন্য যদি এমন ধরণের প্রয়োজন হয় তবে: ╳ ╳

╳ 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ছোট / বড় এবং লাল করতে চান !

এইচটিএমএল:

<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

আপনি যে পাঠ্যটি অ্যাক্সেসযোগ্য উপায়ে লুকিয়ে রেখেছেন তা স্প্যানে রেখে স্ক্রিন পাঠকদের কাছে কেবল অ্যাক্সেসযোগ্য পাঠ্যটি ব্যবহার করতে পারেন। সিএসএসে এক্স রাখুন যা স্ক্রিন পাঠকদের দ্বারা পঠনযোগ্য নয়, সুতরাং বিভ্রান্ত হবে না, তবে পৃষ্ঠায় দৃশ্যমান এবং কীবোর্ড ব্যবহারকারীদের দ্বারা অ্যাক্সেসযোগ্য।

<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);
}

তারপরে আপনার যেখানে প্রয়োজন সেখানে কেবল নীচের এইচটিএমএল রাখুন:

 <span class='popupClose'></span>

Comments

অথবা আপনি <i ক্লাস = 'ম্যাটারিয়াল-আইকন'> বন্ধ </ i> ব্যবহার করতে পারেন (< দ্য হেড <লিঙ্ক href = " fouts.googleapis.com/icon?family=Material+ আইকনগুলি " rel = "স্টাইলশিট"> )

— ব্যবহারকারী 1432181

Answer 16

×বেশী ভালো ✖হিসাবে ✖এজ অদ্ভুত আচরণ করবে এবং Internet Explorer (IE11 পরীক্ষিত)। এটি সঠিক রঙটি পায় না এবং একটি "ইমোজি" দ্বারা প্রতিস্থাপিত হয়