Ikonėlių šriftas

Font Awesome

Yra keletas ikonėlių šriftų, tačiau dažniausiai pastaruoju metu naudojamas Font Awesome. Ši ikonėlių biblioteka turi mokamą ir nemokamą versijas. Skiriasi tuo, kad mokamoje versijoje yra daugiau kaip 6 tūkst. skirtingų ikonėlių, o nemokamoje versijoje - daugiau kaip 2,5 tūkst. ikonėlių. Tačiau kiekvienoje naujoje versijoje yra pridedama naujų ikonėlių, todėl tie skaičiai nuolat didėja.

Kaip įsidiegti ikonėlių šriftą?

Jūsų kompiuteryje turi būti įdiegtas Node.js, tada iš savo kuriamo projekto katalogo (pvz., C:\xampp\htdocs\my_project) komandinėje eilutėje įveskite šią komandą:

npm install fontawesome-free

Projekto kataloge bus sukurtas naujas katalogas node_modules, kuriame ir bus įdiegtas ikonėlių šriftas.
Norint pajungti ikonėlių šriftą, reikia HTML dokumente pridėti CSS ir JS failus. CSS failas pajungiamas head dalyje:

<head>
    ...
    <link href="node_modules/fontawesome-free/css/all.min.css" rel="stylesheet">
    ...
</head>

O JS failas pajungiamas body dalies gale:

<body>
    ...
    <script src="node_modules/fontawesome-free/js/all.min.js"></script>
</body>

Kaip naudoti ikonėles?

Užeikite į puslapį https://fontawesome.com/icons ir paieškos lauke įveskite objekto pavadinimą, pvz., cat.
Atsidarius ikonėlę matysite stiliaus pasirinkimą. Ikonėlės turi 5 stilius: Solid, Regular, Light, Thin ir Duotone, tačiau nemokamai versijai skirtas tik Solid tipas. Nusikopijuokite kodą ir įkelkite į HTML dokumentą:

<i class="fas fa-cat"></i>

Atlikus šiuos žingsnius ir paleidus HTML dokumentą interneto naršyklės lange turėtumėte matyti katės ikonėlę:

Ką galima atlikti su ikonėlėmis?

1. Galima keisti ikonėlių dydį:

<i class="fas fa-cat fa-xs"></i>
<i class="fas fa-cat fa-sm"></i>
<i class="fas fa-cat fa-lg"></i>
<i class="fas fa-cat fa-2x"></i>
<i class="fas fa-cat fa-3x"></i>
<i class="fas fa-cat fa-5x"></i>
<i class="fas fa-cat fa-7x"></i>
<i class="fas fa-cat fa-10x"></i>

2. Galima pasukti ikonėlę įvairiais laipsniais ar padaryti jos veidrodinį atvaizdą:

<div class="fa-4x">
    <i class="fas fa-cat" data-fa-transform="rotate-90"></i>
    <i class="fas fa-cat" data-fa-transform="rotate-180"></i>
    <i class="fas fa-cat" data-fa-transform="rotate-270"></i>
    <i class="fas fa-cat" data-fa-transform="rotate-30"></i>
    <i class="fas fa-cat" data-fa-transform="rotate--30"></i>
    <i class="fas fa-cat" data-fa-transform="flip-v"></i>
    <i class="fas fa-cat" data-fa-transform="flip-h"></i>
    <i class="fas fa-cat" data-fa-transform="flip-v flip-h"></i>
</div>

3. Galima pridėti animacijos:

<div class="fa-4x">
    <i class="fas fa-cat fa-spin"></i>
    <i class="fas fa-cat fa-pulse"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-spinner fa-pulse"></i>
</div>

4. Galima ikonėles naudoti sąrašams:

Šunys
Katės
Paukščiai
Varliagyviai
Voragyviai

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-cat"></i></span>Šunys</li>
    <li><span class="fa-li"><i class="fas fa-dog"></i></span>Katės</li>
    <li><span class="fa-li"><i class="fas fa-dove"></i></span>Paukščiai</li>
    <li><span class="fa-li"><i class="fas fa-frog"></i></span>Varliagyviai</li>
    <li><span class="fa-li"><i class="fas fa-spider"></i></span>Voragyviai</li>
</ul>

5. Galima ikonėles grupuoti tarpusavyje ar apjungti su tekstu:

27 NEW 1,419

<div class="fa-4x">
    <span class="fa-layers fa-fw">
        <i class="fas fa-circle" style="color:Tomato"></i>
        <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
    </span>
    <span class="fa-layers fa-fw">
        <i class="fas fa-bookmark"></i>
        <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
    </span>
    <span class="fa-layers fa-fw">
        <i class="fas fa-calendar"></i>
        <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
    </span>
    <span class="fa-layers fa-fw">
        <i class="fas fa-certificate"></i>
        <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
    </span>
    <span class="fa-layers fa-fw">
        <i class="fas fa-envelope"></i>
        <span class="fa-layers-counter" style="background:Tomato">1,419</span>
    </span>
</div>