|
Listk formzsa Font Awesome ikonokkal
2019.08.08. 13:43
Ebben a bejegyzsben megmtuatom nektek, hogyan tudjtok egyedibb s szebb tenni a listkat.
Egy alap lista gy nzki:
A kvetkez kddal pedig ezt tudjtok elrni:
- 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 kdban gy nz 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 cserlni az ikont
<li>szveg</li> - itt pedig a listaelem elnevezst tudod megadni
gy tudod megtallni az ltalad kivlasztott ikon elrsi kdjt:
1. Nyisd meg a Font Awesome 4.7-et, a linket feljebb tallod. Vlaszt ki az Icons szekcit.
2. Itt tudsz keresni egy bizonyos ikonra, pldul ha berod a "calendar" szt akkor tbb naptras ikont fog kiadni. Vlaszd ki a neked legjobban tetszt.
3. Az ikon adatlapjn lthatod hogy nz ki klnbz mretekben, illetve lejjebb tallod az ebben a kdban hasznland kdrszt is. Ezt illeszd be a megfelel helyre.
Fontos!
-> A kd akkor fog a megfelelen mkdni, ha kdnzetben szerkeszted. Abban a pillanatban, ahogy tvltod a modulszerkesztt (pl CKEditor (j)-ra), eltnnek az ikonok.
-> Ahhoz, hogy az ikonok megfelelen jelenjenek meg, s minden eszkzrl lthatak legyenek illeszd be ezt a scriptet a lblcbe!
<script src="https://use.fontawesome.com/c793c7dce4.js"></script>
| 
AJÁNLOM AZ OLDALT
