Personalizat li list-style cu font-awesome icon (Programare, Css, Liste Html, Font Minunat)

Darrrrrren a intrebat.

Mă întrebam dacă este posibil să utilizez clasele font-awesome (sau orice alt font iconic) pentru a crea un stil de tip font personalizat. <li> list-style-type?

În prezent, folosesc jQuery pentru a face acest lucru, adică:

$("li.myClass").prepend("<i class=
icon-chevron-right
></i>");

Cu toate acestea, acest lucru nu stilizează în mod corespunzător atunci când <li> textul se înfășoară de-a lungul paginii, deoarece consideră că pictograma face parte din text, nu din bullet-indicator.

Aveți vreun sfat?

7 răspunsuri
João Paulo Macedo

The Modul de liste și contoare CSS Nivel 3 introduce ::marker pseudo-element. Din câte am înțeles, ar permite așa ceva. Din păcate, niciun browser nu pare să îl suporte.

Ceea ce puteți face este să adăugați niște umplutură la părinte ul și să trageți pictograma în această umplutură:

Reglați padding-ul/mărimea fontului/etc. după bunul plac și asta e tot. Aici este o metodă obișnuită: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Acest lucru funcționează cu orice tip de font iconic. FontAwesome, totuși, oferă propria lor modalitate de a rezolva această „problemă”. Consultați răspunsul lui Darrrrrren de mai jos pentru mai multe detalii.

Comentarii

  • Am făcut o pagină de referință a codurilor de conținut CSS corespunzătoare fiecărei pictograme Font Awesome aici: astronautweb.co/snippet/font-awesome –  > Por Astrotim.
  • Această soluție funcționează chiar și în cazul elementelor cu mai multe coloane. (Celelalte care folosesc position:absolute nu o fac) –  > Por sbaechler.
  • @Astrotim Puteți obține aceste coduri direct de pe foaia de calcul oficială FontAwesome: fortawesome.github.io/Font-Awesome/cheatsheet –  > Por rybo111.
  • Această soluție are nevoie de ușoare revizuiri pentru utilizarea cu FontAwesome 5. Aveți nevoie de font-family: ‘Font Awesome 5 Free’; precum și de un font-weight explicit pentru ca aceasta să funcționeze. Vezi stackoverflow.com/questions/47894414/… –  > Por kloddant.
  • Trebuie să adaug o greutate specifică pentru ca acest lucru să funcționeze: font-weight: 900; –  > Por mayersdesign.
cutemachine

În conformitate cu Documentația Font Awesome:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

Sau, folosind Jade:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

Comentarii

  • Acest lucru a funcționat în vue pentru mine ca aceasta <ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ... –  > Por justin.m.chase.
Darrrrrren

Aș dori să ofer o soluție alternativă, mai ușoară, care este specifică FontAwesome. Dacă folosiți un alt font iconic, răspunsul lui JOPLOmacedo este în continuare perfect valabil pentru utilizare.

FontAwesome se ocupă acum de stilurile de listă în mod intern cu clase CSS.

Iată exemplul oficial:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Comentarii

    18

  • Cu ultimul Font-Awesome trebuie să înlocuiți „icons-ul” cu „fa-ul” și „icon-li” cu „fa-li” : [code] <ul class=”fa-ul”> <li class=”fa-li fa fa-check”> …</li></ul>[/code] –  > Por Thomas.
habsi

Am vrut să adaug la răspunsul lui JOPLOmacedo. Soluția lui este soluția mea preferată, dar am avut întotdeauna probleme cu indentarea atunci când li avea mai mult de un rând. A fost dificil să găsesc indentarea corectă cu marjele etc. Dar s-ar putea ca acest lucru să mă privească doar pe mine.

Pentru mine, poziționarea absolută a :before pseudo-elementului funcționează cel mai bine. Am setat padding-left pe ul, poziția negativă la stânga pe elementul :before element, la fel ca în cazul lui ul padding-left. Pentru a obține distanța conținutului față de :before elementului la dreapta, am setat doar poziția padding-left pe li. Bineînțeles că li trebuie să aibă poziția relativă. De exemplu

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

Sper că este clar și că are vreo valoare pentru altcineva decât mine.

Comentarii

  • Pentru toți începătorii, acest lucru este formatat într-un limbaj de preprocesare CSS numit SASS. CSS-ul pur nu poate fi imbricate în acest mod. –  > Por JoshWillik.
Bedram Tamang

Am făcut două lucruri inspirate de comentariul lui @OscarJovanny, cu câteva hack-uri.

Pasul 1:

  • Descărcați fișierul cu pictograme ca svg de la Aici, deoarece am nevoie doar de această pictogramă de la font awesome

Pasul 2:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

Rezultate

Comentarii

  • Bună, pot folosi png în loc de svg? mulțumesc –  > Por zukijuki.
Oscar Jovanny

Eu am făcut așa:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

Sau puteți încerca acest lucru dacă doriți să schimbați culoarea:

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

cjbarth

Acum că ::marker este disponibil în evergreen browsere, iată cum ați putea să-l utilizați, inclusiv folosind :hover pentru a schimba marcajul. După cum puteți vedea, acum puteți utiliza orice caracter Unicode doriți ca marker al elementelor din listă și chiar să folosiți contoare personalizate.