|
Listák formázása Font Awesome ikonokkal
2019.08.08. 13:43
Ebben a bejegyzésben megmtuatom nektek, hogyan tudjátok egyedibbé és szebbé tenni a listákat.
Egy alap lista így nézki:
A következő kóddal pedig ezt tudjátok elérni:
- Lista elem
- Lista elem 2
- Lista elem 3
- Lista elem 4
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>Lista elem</li>
<li><span class="fa-li"><i class="fa fa-calendar-plus-o"></i></span>Lista elem 2</li>
<li><span class="fa-li"><i class="fa fa-calendar-plus-o"></i></span>Lista elem 3l</li>
<li><span class="fa-li"><i class="fa fa-calendar-plus-o"></i></span>Lista elem 4</li>
</ul>
A kódban így néz ki egy lista elem:
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>Lista elem</li>
<i class="fa fa-check-square"></i> - Itt tudod cserélni az ikont
<li>szöveg</li> - itt pedig a listaelem elnevezését tudod megadni
Így tudod megtalálni az általad kiválasztott ikon elérési kódját:
1. Nyisd meg a Font Awesome 4.7-et, a linket feljebb találod. Választ ki az Icons szekciót.
2. Itt tudsz keresni egy bizonyos ikonra, például ha beírod a "calendar" szót akkor több naptáras ikont fog kiadni. Válaszd ki a neked legjobban tetszőt.
3. Az ikon adatlapján láthatod hogy néz ki különböző méretekben, illetve lejjebb találod az ebben a kódban használandó kódrészt is. Ezt illeszd be a megfelelő helyre.
Fontos!
-> A kód akkor fog a megfelelően működni, ha kódnézetben szerkeszted. Abban a pillanatban, ahogy átváltod a modulszerkesztőt (pl CKEditor (új)-ra), eltűnnek az ikonok.
-> Ahhoz, hogy az ikonok megfelelően jelenjenek meg, és minden eszközről láthatóak legyenek illeszd be ezt a scriptet a láblécbe!
<script src="https://use.fontawesome.com/c793c7dce4.js"></script>
| 
AJÁNLOM AZ OLDALT
