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.
źródło
ul { list-style-type: none; }
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.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
źródło
ul
ili
muszą być ustawione,position: relative
ponieważfa-li
pozycja jest pozycjonowana bezwzględnie. W przeciwnym razie wszystkie unoszą się w lewym górnym rogu.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
źródło
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.
źródło
li:before
możesz mieć inną rodzinę czcionek niż onali
sama.@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.
źródło
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
źródło
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
źródło