Używanie ikony Font Awesome dla punktorów z pojedynczym elementem listy

Chcielibyśmy móc używać ikony Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) jako punktora dla nieuporządkowanych list w systemie CMS.

Edytor tekstu w CMS generuje tylko surowy HTML, więc nie można dodawać dodatkowych elementów / klas.

Oznacza to wyświetlanie ikon, gdy oznaczenie wygląda następująco:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Pierwszy problem, który widzę, czy Font Awesome wymaga innego atrybutu rodziny czcionek, który wymagałby osobnego elementu.

Czy jest to możliwe przy użyciu czystego CSS? A może musiałbym dołączyć element na początku każdego elementu listy za pomocą czegoś takiego jak jQuery?

Zdaję sobie sprawę, że możemy użyć cofnięcia obrazu tła, ale byłoby wspaniale użyć Font Awesome, jeśli to możliwe.

Rozwiązanie:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Oto post na blogu, który szczegółowo wyjaśnia tę technikę.

Nowa fontawesome (wersja 4.0.3) sprawia, że ​​jest to naprawdę łatwe. Po prostu używamy następujących klas:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Zgodnie z tym (nowym) adresem URL: http://fontawesome.io/examples/#list

Chciałbym rozwinąć niektóre z odpowiedzi powyżej i podanych w innym miejscu i zasugerować użycie pozycjonowania bezwzględnego wraz z pseudo-klasą: before . Wiele z powyższych przykładów (i podobnych pytań) wykorzystuje niestandardowe znaczniki HTML, w tym metodę obsługi Font Awesome. Jest to sprzeczne z pierwotnym pytaniem i nie jest bezwzględnie konieczne.

DEMO TUTAJ

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

W zasadzie to wszystko. Wartość ISO do wykorzystania w treści CSS można znaleźć w ściągawce Font Awesome . Po prostu użyj 4 ostatnich znaków alfanumerycznych poprzedzonych odwrotnym ukośnikiem. Tak []się stanie\f058

Jest przykład, jak używać Font Awesome wraz z nieuporządkowaną listą na stronie przykładów .

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

Jeśli po wypróbowaniu tego kodu nie możesz stwierdzić, że działa, oznacza to, że nie dołączasz poprawnie biblioteki. Według ich strony internetowej powinieneś uwzględnić biblioteki jako takie:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Przeczytaj również kapryśny post Chrisa Coyiera na temat czcionek ikon na jego stronie CSS Tricks .

Oto jego screencast, w którym mówi o tym, jak stworzyć własną ikonę czcionki-twarz.

@Tama, możesz sprawdzić tę odpowiedź: Używanie ikon Font Awesome jako punktorów

Zasadniczo możesz to osiągnąć, używając tylko CSS bez potrzeby stosowania dodatkowych znaczników, jak sugeruje FontAwesome i inne odpowiedzi tutaj.

Innymi słowy, możesz osiągnąć to, czego potrzebujesz, używając tych samych podstawowych znaczników, o których wspomniałeś w swoim pierwszym poście:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Dzięki.

Moje rozwiązanie przy użyciu standardowego <ul>i <i>wewnętrznego<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

DEMO TUTAJ

W Font Awesome 5 można to zrobić za pomocą czystego CSS, jak w niektórych z powyższych odpowiedzi, z pewnymi modyfikacjami.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Bez prawidłowej grubości czcionki pokaże tylko pusty kwadrat.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define