Cum se poate utiliza simbolul de bifă / semn de control (✓) în loc de buline în lista neordonată? (Programare, Css, Html, Caractere Speciale)

Eroul de supraîncărcare a stivei a intrebat.

Am o listă în care vreau să adaug simbolul bifă înainte de textul listei. Există vreun CSS care mă poate ajuta să aplic acest mod?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Notă: vreau acest lucru în acest tip de cod HTML

4 răspunsuri
Josh Crozier

Puteți utiliza un pseudo-element pentru a insera acel caracter înainte de fiecare element din listă:

Comentarii

  • Am folosit acest lucru și funcționează în Chrome 65. Am reușit să înfășor fiecare <li> în mod normal folosind o margine solidă de 1px, float left și margin right pe ul li:before – puteți seta culoarea marginii la fundalul elementului dvs. –  > Por ymasood.
  • Vă mulțumim pentru soluție! Am adăugat o notă că indentarea se pierde la împachetare. (Îmi cer scuze pentru că am editat postarea, dar a fost mai bine să ilustrez problema decât să las un comentariu și sperăm să găsim o modalitate de a rezolva această problemă). –  > Por Dan Dăscălescu.
  • @Josh: Răspunsul lui Adam are o soluție la problema împachetării. L-am editat pentru claritate, depinde de tine să o incluzi. –  > Por Dan Dascalescu.
Michael Benjamin

Iată trei stiluri diferite de bifare pe care le puteți folosi:

jsFiddle

Referințe:

Comentarii

  • Acest lucru nu este diferit de răspunsul lui Josh Crozier și suferă de aceeași problemă de distrugere a indentației la împachetare. De asemenea, ultimul caracter nu apare nici pe Chromium/Ubuntu, dar oricum asta nu are importanță – răspunsul lui Josh este esența soluției. Ce caractere de bifare să folosiți este o alegere de design. –  > Por Dan Dăscălescu.
  • @DanDascalescu, acest răspuns extinde soluția lui Josh Crozier, oferind opțiuni de bifare pe care unii oameni s-ar putea să nu le cunoască. Este o informație valoroasă. Faptul că sunt „opțiuni de proiectare” nu face acest răspuns mai puțin util. Votul dvs. negativ este nejustificat în opinia mea, deoarece: (1) răspunsul a fost util pentru mulți oameni (și are aproape 30 de voturi în sus), (2) răspunsul nu pretinde a fi altceva decât alegeri de stil și (3) nu am încercat să abordez alte probleme (care, așa cum spuneți, sunt oricum „în afara subiectului”).  > Por Michael Benjamin.
  • Opțiunile de bifare pe care le văd, „2713” și „2714”, sunt puncte de cod Unicode brute. Nu pot vedea cum arată. Dacă răspunsul vrea să ofere opțiuni de stil, poate include niște semne de control reale: ✓, ✔, ☑, ✅. Ce bifă să folosești, nu este o problemă interesantă. Cum să folosești semnele de control este. Eu o văd ca pe „Cum vopsesc o barcă care se află în prezent în apă”, față de „Ce nuanțe de albastru pot să o vopsesc”. Are sens? –  > Por Dan Dăscălescu.
  • Aveți dreptul să priviți acest răspuns din orice perspectivă doriți. Nu am de gând să vă contrazic opinia. Cert este, însă, că marea majoritate a celor care vizitează acest post consideră util acest răspuns. O să las lucrurile așa. Mulțumesc pentru feedback. @DanDascalescu –  > Por Michael Benjamin.
  • Oamenii dau upvote din mai multe motive diferite. Oamenii dau upvote pentru motive diferite de ale tale. Tu vii și nu ești de acord cu conținutul acestui răspuns. Nu spui că răspunsul este greșit sau depășit (ca în linkurile la care ai făcut referire), pur și simplu nu-ți place. Mie îmi convine. Aveți dreptul la opinia dumneavoastră. –  > Por Michael Benjamin.
Adam Orlov

Ca o completare la soluție:

ul li:before {
 content: '✓'; 
}

Puteți utiliza orice pictogramă SVG ca și conținut, , cum ar fi pictograma Font Aswesome.

Notă: Pentru a rezolva problema de împachetare pe care au avut-o alte răspunsuri:

  • rezervăm 1.5m ems de spațiu în stânga fiecărui <li>
  • apoi poziționăm SVG-ul la începutul acestui spațiu (position: absolute; left: 0)

Aici sunt mai multe Icoane negre Font Awesome.

Verificați acest lucru CODEPEN pentru a vedea cum puteți adăuga culori și modifica dimensiunea lor.

Hitendra Singh Shekhawat
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

puteți folosi acest stil simplu css

ul {
     list-style-type: '2713';
   }

Comentarii

  • Răspunsul lui Adam a abordat problema înfășurării, dar a necesitat tone de cod suplimentar… acesta funcționează pur și simplu. Spațierea a fost o atingere pentru mine, așa că am sfârșit prin a adăuga un 11 suplimentar la sfârșitul acestuia pentru a spația marca de control departe de <li>. –  > Por Jaden Baptista.