Bootstrap - Ikone


Korištenje ikonica u Bootstrap-u

Bootstrap sada uključuje preko 1.300 visokokvalitetnih ikone, koje su dostupne u SVG-ovima, SVG sprite-u ili formatu web fontova. Možete ih koristiti sa ili bez Bootstrap-a u bilo kom projektu. Prednost upotrebe ikonica je u tome što možete stvoriti ikone bilo koje boje samo primjenom CSS svojstva boje. Takođe, za promjenu veličine ikona možete jednostavno koristiti CSS svojstvo veličine fonta. Sada, da vidimo kako uključiti i koristiti Bootstrap ikone na web stranici.



Uključivanje ikonica na web stranici

Najjednostavniji način uključivanja Bootstrap ikonica na web stranicu je upotreba CDN veze. Ova CDN veza u osnovi upućuje na udaljenu CSS datoteku koja uključuje sve potrebne klase za generisanje ikonica. Bootstrap ikone možete uključiti u predložak Bootstrap-a kao i na jednostavnu web stranicu bez upotrebe Bootstrap okvira. Pogledajmo bliže sljedeći primjer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Uključivanje Bootstrap ikona</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- Bootstrap Font CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <h1><i class="bi-globe"></i> IT TUTORIJALI!</h1>

    <!-- JS fajl: jQuery prvo, pa onda Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

IT TUTORIJALI!



Kako koristiti ikone za pokretanje u vašem kodu?

Da biste koristili Bootstrap ikone u svom kodu, trebaće vam oznaka <i> na kojoj je primijenjena pojedinačna klasa ikona .bi-*. Opšta sintaksa za upotrebu Bootstrap ikona je:

<i class="bi-class-name"></i>

Ovje je class-name ime određene klase ikona, npr. search, person, calendar, star, globe, facebook, twitter, itd. Pogledajte listu svih klasa Bootstrap ikona. Na primjer, da biste ikonu za pretraživanje smjestili unutar dugmeta, možete učiniti nešto poput ovog:

<button type="submit" class="btn btn-primary"><span class="bi-search"></span> Pretraga</button>
<button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Pretraga</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Dugme sa ikonom</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="submit" class="btn btn-primary"><span class="bi-search"></span> Pretraga</button>
    <button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Pretraga</button>

    <!-- JS fajl: jQuery prvo, pa onda Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Slično ovome, ikone možete smjestiti unutar navigacije sajta, obrazaca, tabela, odlomaka ili bilo gdje drugo. U sljedećoj lekciji vidjećete kako koristiti ove ikone u Bootstrap nav komponentama.



Korištenje Font Awesome Icons u Bootstrap-u

U Bootstrap-u možete koristiti i vanjske biblioteke ikona. Jedna od najpopularnijih i vrlo kompatibilnih eksternih biblioteka ikona za Bootstrap je Font Awesome. Pruža preko 675 ikona koje su dostupne u SVG, PNG, kao i u web formatu za bolju upotrebljivost i skalabilnost. Jednostavno možete koristiti besplatno dostupnu font-awesome CDN vezu da biste je uključili u svoj projekat. Pogledajmo sljedeći primjer da bismo razumjeli kako to u osnovi funkcioniše:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Uključivanje Font Awesome ikona u Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
    <div class="bs-example">
        <h1><i class="fa fa-globe"></i> Hello, world!</h1>
    </div>

    <!-- JS fajl: jQuery prvo, pa onda Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

Hello, world!



Kako u vašem kodu da koristite Font Awesome Icons?

Da biste u kodu koristili ikone Font Awesome, trebaće vam oznaka <i> zajedno s osnovnom klasom .fa-* i pojedinačnom klasom ikona .fa-*. Uopšteno sintaksa za korištenje Font Awesome ikona je:

<i class="fa fa-class-name"></i>

Ovdje je class-name ime određene klase ikona, npr. search, user, calendar, star, globe, facebook, twitter, itd. pogledajte listu svih klasa ikona Font Awesome. Na primjer, možete smjestiti Font Awesome ikonu za pretraživanje unutar dugmeta poput sljedećeg primjera:

<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Pretraga</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Pretraga</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Dugme sa Font Awesome ikonom</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
    <div class="bs-example">
        <button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Pretraga</button>
        <button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Pretraga</button>
    </div>

    <!-- JS fajl: jQuery prvo, pa onda Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako: