DSB Digitalprofil

For å samle, og tilgjengeliggjøre ikoner som brukes på tvers av DSBs tjenester er det laget en ikon-font som inneholder disse som enfarge-ikoner.

Ikonene som finnes i ikonfonten er vist nedenfor.

tank

substance-highly-flammeable

substance-flammeable

right

left

home

help

download

down

calendar

back

arrow

{{ (!showcode1) ? "Vis" : "Skjul" }} kode

            <div class="icon-list row clearfix">
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-tank"></i>
        <div>tank</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-substance-highly-flammeable"></i>
        <div>substance-highly-flammeable</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-substance-flammeable"></i>
        <div>substance-flammeable</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-search"></i>
        <div>search</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-right"></i>
        <div>right</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-left"></i>
        <div>left</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-home"></i>
        <div>home</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-help"></i>
        <div>help</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-download"></i>
        <div>download</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-down"></i>
        <div>down</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-calendar"></i>
        <div>calendar</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-back"></i>
        <div>back</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <i class="icon-lg icon-arrow"></i>
        <div>arrow</div>
    </div>
</div>

Ikonfonten inneholder vektorikoner og kan skaleres til størrelsen som ønskes ved å sette font-størrelse, men for enkelhets skyld er det laget et par klasse for praktiske størrelser og alle ikonene kan hentes ut ved å bruke klassenavn som svarer til filnavn for ikonet.

Ved å bruke et i-element med kun icon-tank får man et ikon som samsvarer med skriftstørrelsen i det aktuelle elementet. Om man ønsker et større ikon kan icon-lg brukes for å få et større ikon, og icon-xl for et enda større ikon.

Vanlig ikon:

Stort ikon:

Ekstra stort ikon:

{{ (!showcode2) ? "Vis" : "Skjul" }} kode

            <div style="margin-bottom: 15px;">Vanlig ikon: <i class="icon-tank"></i></div>
<div style="margin-bottom: 15px;">Stort ikon: <i class="icon-lg icon-tank"></i></div>
<div style="margin-bottom: 15px;">Ekstra stort ikon: <i class="icon-xl icon-tank"></i></div>

Ikonfont

Ikonene

Størrelser