Font Awesome

Za brezplačno uporabo različnih ikon se moramo ragistrirati na spletni strani. S pomočjo povezave v glavi dokumenta omogočimo uporabo ikon.

Primer:

Povezava v glavi dokumenta

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />

Primer uporabe ikone

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

Bootstrap Icons

Za brezplačno uporabo lahko uporabimo povezavo v glavi dokumenta ter tako omogočimo uporabo ikon.

Primer:

Povezava v glavi dokumenta

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">

Primer uporabe ikone

<i class="bi bi-house-door"></i>

Balloon

Za brezplačno uporabo Balloon.css vstavimo povezavo v glavo dokumenta ter tako omogočimo uporabo opisa pojma.

Primer:

I'm a small tooltip

Povezava v glavi dokumenta

<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

Primer uporabe opisa pojma

<span class="btn btn-secondary" data-balloon-length="small" aria-label="This is small tooltip." data-balloon-pos="up">I'm a small tooltip</span>

JavaScript

S funkcijo CopyToClipboard(id) kopiramo kodo v odložišče (Clipboard), ostale funkcije so za pomik na vrh strani. Funkcija topFunction() poskrbi za pomik na vrh strani, funkcija scrollFunction() pa po pomiku po strani navzdol za 100 px ali več prikaže gumb za pomik na vrh strani.

Primer funkcije CopyToClipboard(id):

Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis, arcu id ultricies tempor, leo leo sodales tortor, nec tempus mi arcu id ipsum. Sed a placerat tellus. Fusce convallis pharetra augue, hendrerit cursus eros tincidunt at.

Primer pomik na vrh strani:

Na vrh

Funkcija CopyToClipboard(id)

function CopyToClipboard(id) {
    var r = document.createRange();
    r.selectNode(document.getElementById(id));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(r);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
}

Uporaba funkcije CopyToClipboard(id)

<a href="#" onclick="CopyToClipboard('lorem_ipsum');return false;" class="btn btn-dark">Copy</a>

<div id="lorem_ipsum">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Cras convallis, arcu id ultricies tempor, leo leo sodales 
    tortor, nec tempus mi arcu id ipsum. Sed a placerat tellus. 
    Fusce convallis pharetra augue, hendrerit cursus eros tincidunt at.
</div>

Funkcije za pomik na vrh strani

<button class="btn btn-dark" onclick="topFunction()" id="ToTopBtn">Na vrh</button>
    
window.onscroll = function () { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.getElementById("ToTopBtn").style.display = "block";
    } else {
        document.getElementById("ToTopBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}