Używanie ikony Font Awesome dla punktorów, z pojedynczym elementem listy
Chcielibyśmy móc używać czcionki Awesome ( http://fortawesome.github.com/Font-Awesome / ) ikona jako punkt dla list nieuporządkowanych w CMS.
Edytor tekstu na CMS wyświetla tylko surowy HTML, więc nie można dodawać dodatkowych elementów/ klas.
Oznacza to wyświetlanie ikon, gdy znacznik wygląda tak:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Pierwszy problem widzę czy Font Awesome wymaga innego atrybutu font-family, który wymagałby osobnego element.
Czy jest to możliwe przy użyciu czystego CSS? A może powinienem dodać element do początku każdego elementu listy używając czegoś takiego jak jQuery?
Zdaję sobie sprawę, że możemy użyć odwrotnej strony obrazu tła, ale byłoby wspaniale użyć Font Awesome, jeśli to możliwe.
7 answers
Rozwiązanie:
li:before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
Oto blog post , który wyjaśnia tę technikę dogłębnie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-20 16:40:09
Nowa fontawesome (wersja 4.0.3) sprawia, że jest to naprawdę łatwe do zrobienia. 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) url: http://fontawesome.io/examples/#list
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-07 01:42:06
Chciałbym oprzeć się na niektórych odpowiedziach powyżej i podanych gdzie indziej i zasugerować użycie absolute positioning wraz z : before pseudo class. 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.
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;
}
[] staje się \f058Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-01 09:01:06
Jest przykład użycia Font Awesome wraz z nieuporządkowaną listą na stronie z przykładami .
<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 nie możesz znaleźć, że działa po wypróbowaniu tego kodu, to nie włączasz biblioteki poprawnie. Według ich strony internetowej powinieneś dołączyć biblioteki jako takie:
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">
Zobacz również Post Chrisa Coyiera na temat czcionek icon na jego stronie internetowej sztuczki CSS.
Oto screencast przez niego, jak również mówi o tym, jak stworzyć własną czcionkę ikony-twarz.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-17 23:31:11
@Tama, możesz sprawdzić tę odpowiedź: używając Font Awesome icons jako bullets
Zasadniczo możesz to osiągnąć używając tylko CSS bez potrzeby stosowania dodatkowych znaczników, zgodnie z sugestią FontAwesome i innych 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 pierwszym poście:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:37
Moje rozwiązanie przy użyciu standardowych <ul> i <i> wewnątrz <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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-10 17:54:11
Używam http://icomoon.io/ Daje Ci możliwość ładowania tylko ikon czcionek, których potrzebujesz. Wybierz ikony, które chcesz, podłącz klucz do ikony i pobierz małą czcionkę, a nie całą niesamowitą czcionkę (która nadal jest niesamowita).
Oto mój eksperyment: http://jsfiddle.net/Annett/ZB7TK/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-15 02:23:05