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

133

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.

BaronGrivet
źródło

Odpowiedzi:

252

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

Inluxc
źródło
18
Przydatna lista tłumaczeń z tych niesamowitych ikon na wartości css jest dostępna tutaj: astronautweb.co/snippet/font-awesome
Scott C Wilson
24
Będziesz chciał to uwzględnić, aby usunąć domyślne punktyul { list-style-type: none; }
Edd
Dlaczego ta metoda nie działa, kiedy mam dwie listy na tej samej stronie?
deKajoo
6
Bardzo fajnie, jedyną rzeczą, którą sugerowałbym, aby ładniej wyrównać rzeczy, jest użycie margin: 0 0.2em 0 -1.2em;po prostu zwiększenia / zmniejszenia dwóch wartości o tę samą wartość, aby uzyskać pożądany odstęp. Jeśli użyjesz stałej wartości w pikselach, która nie odpowiada Twojej czcionce, zauważysz rozbieżność w elementach listy wielowierszowej.
braks
Dodałem do tego prefiks ul, w przeciwnym razie spróbowałby to zrobić, gdyby klient użył cms do stworzenia uporządkowanej (numerowanej) listy
rtpHarry
158

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

lol
źródło
12
To powinna być prawidłowa odpowiedź w nowej wersji fa. Bardzo dobrze, dzięki za to wyjaśnienie.
David
23
Nie zgadzam się, pytanie dotyczyło rozwiązania wykorzystującego pojedynczą listę w czystym CSS. Wykorzystuje to dodatkowy HTML, a także klasy. Chociaż jest to zdecydowanie sposób, w jaki dokumentacja FA określa, aby to zrobić, nie jest to technicznie rozwiązanie tego pytania i nie jest przydatne, jeśli chcesz to zrobić bez modyfikowania danych wyjściowych HTML.
Ryan
Wiem, do czego zmierzasz - ale ludzie, którzy nie piszą ciągle czystego CSS w sytuacjach, w których nie mogą zmodyfikować swojego HTML ???? (poważnie, proszę spojrzeć na zmianę swojego frameworka internetowego) będą potrzebować odświeżania pamięci zapytań Google, aby utworzyć link do „prawidłowej” niesamowitej czcionki, zestawionej z „rzeczywistą” odpowiedzią, obok siebie, aby podjąć decyzję. Nie chcę powiedzieć "nie ma tylko jednej poprawnej odpowiedzi na problem", ale nie ma ...
lol
1
To podejście nie działa dobrze w przypadku elementów listy zawijanych do wielu wierszy, ponieważ identyfikacja w dodatkowych wierszach nie rozszerza się, aby uwzględnić szerokość ikony.
Lars Haugseth
2
Prawdopodobnie warto dodać, z FA 4.3 (prawdopodobnie również inne wersje) i Bootstrap 3, elementy uli limuszą być ustawione, position: relativeponieważ fa-lipozycja jest pozycjonowana bezwzględnie. W przeciwnym razie wszystkie unoszą się w lewym górnym rogu.
Jeremy Harris
14

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 [&#xf058;]się stanie\f058

Ryan
źródło
4

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.

cereallarceny
źródło
2
Nie potrzebujesz dodatkowych znaczników: li:beforemożesz mieć inną rodzinę czcionek niż ona lisama.
cimmanon
@cimmanon: Chociaż rzeczywiście masz rację, dokumentacja Font Awesome sugeruje, że powinieneś mieć dodatkowe znaczniki. Technicznie nie jest to potrzebne, jednak wydaje mi się, że może to wymagać przekopania się przez glify czcionki, aby dowiedzieć się, który klawisz jest przypisany do którego symbolu. Wymagałoby to trochę czasu i cierpliwości, ale na pewno Twoje rozwiązanie również się sprawdzi.
cereallarceny
@cereallarceny - naszym problemem jest to, że edytor HTML (TinyMCE) dla CMS generuje format, który podałem w pytaniu. Z tej perspektywy nie mamy kontroli nad listą HTML. Chyba że skonfigurujemy TinyMCE tak, aby zawierał element i (i nie usuniemy go jako pustego elementu).
BaronGrivet
Więc nie masz dostępu do HTML, czy masz dostęp do CSS?
cereallarceny
Tak, pełny dostęp do CSS.
BaronGrivet
1

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

Ricardo Zea
źródło
1

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>

wprowadź opis obrazu tutaj

DEMO TUTAJ

Marco Allori
źródło
1

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

Dush
źródło