Ikoner är ett komplement till text och ska göra det enklare för användarna att förstå vad de ska göra. Du förenklar för användaren och ger en enhetlig bild av Jordbruksverkets digitala tjänster genom att använda rätt ikon i rätt färg och storlek samt placera den på rätt ställe.
Vi på Jordbruksverket designar inte ikoner, utan låter de som kan det bäst göra jobbet. Vi använder en av de populäraste ikonuppsättningarna, Font Awesome.
Font Awesome erbjuder över 5 000 ikoner. Vi har valt ut de vanligaste ikonerna och det är dessa du ska använda. Kontakta styleguideteamet om du behöver en annan ikon.
För att använda en ikon:
Font Awesome har information om hur du kan göra dekorativa respektive semantiska ikoner tillgängliga.
Font Awesomes information om tillgängliga ikoner Länk till annan webbplats.
För att lägga in alla ikoner lägg in följande i din angular.json fil under "styles". Detta kommer göra att ikonerna lägger sig i en egen bundle fil.
"styles": [
{
"input": "./node_modules/@sjv/component-library/dist/release/sjv-ikoner.css",
"bundleName": "sjv-ikoner"
},
...
Mönstret är detsamma om man vill lägga in enskilda ikoner, skillnaden är att de behöver ligga i sina egna bundles, eftersom Angular är "smart" och plockar bort fonts med samma namn. Vilket betyder att varje ikon behöver ligga i sin egen bundle då alla ikoner har samma font namn "sjv-icon-fonts". Lägger men in flera enskilda ikoner så kommer de då får varsinn egen CSS fil, har man lagt in fler än 10 enskilda ikoner kommer de ta mer bandbredd än att importera in alla ikoner. Vill man använda fler än 10 ikoner är det bättre att imprortera in alla iknoner.
OBS. Ikoner med ett streck i namnet har istället ett understreck när den ska importeras (undantaget prefixet "sjv-i-"), detta på grund av en begränsning i webpack som designsystem använder för att bygga upp ikon CSS biblioteket.
"styles": [
{
"input": "./node_modules/@sjv/component-library/dist/release/ikoner/sjv-i-kryss.css",
"bundleName": "sjv-i-kryss"
},
{
"input": "./node_modules/@sjv/component-library/dist/release/ikoner/sjv-i-multiselect_ikon.css",
"bundleName": "sjv-i-multiselect_ikon"
},
...
Du kan se i HTML-koden hur du lägger till en ikon i HTML.
<span class="sjv-i-check" style="font-size: 2rem; margin: 2rem 2rem 0 0;"></span>
Du kan se i HTML-koden hur du lägger till en ikon från CSS.
<style>
.randomIkon::before {
content: "\e900";
}
</style>
<span class="sjv-icon randomIkon" style="font-size: 2rem"></span>
Bokmärke
Class : sjv-i-bokmarke
Content : "\e903"
Kalender
Class : sjv-i-kalender
Content : "\e914"
Check
Class : sjv-i-check
Content : "\e904"
Extern länk
Class : sjv-i-extern-lank
Content : "\f08e"
Pil upp
Class : sjv-i-pil-upp
Content : "\ea3a"
Pil höger
Class : sjv-i-pil-hoger
Content : "\ea3c"
Pil vänster
Class : sjv-i-pil-vanster
Content : "\ea40"
Chevron ner
Class : sjv-i-chevron-ner
Content : "\e906"
Chevron upp
Class : sjv-i-chevron-upp
Content : "\e907"
Chevron höger
Class : sjv-i-chevron-hoger
Content : "\e905"
Chevron vänster
Class : sjv-i-chevron-vanster
Content : "\e908"
Ångra
Class : sjv-i-angra
Content : "\e900"
Kommentar
Class : sjv-i-kommentar
Content : "\e916"
Kopiera
Class : sjv-i-kopiera
Content : "\e917"
Sök
Class : sjv-i-sok
Content : "\e925"
Redigera
Class : sjv-i-redigera
Content : "\e921"
E-post
Class : sjv-i-e-post
Content : "\e909"
Kryss
Class : sjv-i-kryss
Content : "\e90b"
Utropstecken
Class : sjv-i-utropstecken
Content : "\e929"
Flagga
Class : sjv-i-flagga
Content : "\e90e"
Skräp
Class : sjv-i-skrap
Content : "\e930"
Mapp
Class : sjv-i-mapp
Content : "\e91b"
Öppen mapp
Class : sjv-i-oppen-mapp
Content : "\e91d"
Hamburgermeny
Class : sjv-i-hamburgermeny
Content : "\e910"
Hem
Class : sjv-i-hem
Content : "\e911"
Telefon
Class : sjv-i-telefon
Content : "\e93b"
Spara
Class : sjv-i-spara
Content : "\e93c"
Minus
Class : sjv-i-minus
Content : "\e91c"
Plus
Class : sjv-i-plus
Content : "\e91f"
Skriv ut
Class : sjv-i-skriv-ut
Content : "\e924"
Fråga
Class : sjv-i-fraga
Content : "\e90f"
Fråga cirkel
Class : sjv-i-fraga-cirkel
Content : "\f059"
Inställningar
Class : sjv-i-installningar
Content : "\e913"
Logga in
Class : sjv-i-logga-in
Content : "\e919"
Logga ut
Class : sjv-i-logga-ut
Content : "\e91a"
Användare
Class : sjv-i-anvandare
Content : "\e901"
Användare cirkel
Class : sjv-i-anvandare-cirkel
Content : "\e93d"
Uppdatera
Class : sjv-i-uppdatera
Content : "\e928"
Fel
Class : sjv-i-fel
Content : "\e930"
Varning
Class : sjv-i-varning
Content : "\e92d"
Framgång
Class : sjv-i-framgang
Content : "\e92e"
Språk
Class : sjv-i-sprak
Content : "\e933"
Lager
Class : sjv-i-lager
Content : "\e935"
Caret sortera
Class : sjv-i-caret-sortera
Content : "\e938"
i
Class : sjv-i-i
Content : "\f129"
Info
Class : sjv-i-info
Content : "\e931"
Ladda upp
Class : sjv-i-ladda-upp-fil
Content : "\e912"
Ladda ner
Class : sjv-i-ladda-ner-fil
Content : "\e939"
Support
Class : sjv-i-support
Content : "\e93a"
Tag
Class : sjv-i-tag
Content : "\e926"
Prickmeny
Class : sjv-i-prickmeny
Content : "\f142"
Låst
Class : sjv-i-last
Content : "\f023"
Olåst
Class : sjv-i-olast
Content : "\e927"
RSS
Class : sjv-i-rss
Content : "\e922"
Flera svar
Class : sjv-i-multiselect-ikon
Content : "\e932"
Caret ner
Class : sjv-i-caret-ner
Content : "\e934"
Caret upp
Class : sjv-i-caret-upp
Content : "\e93e"
Caret vänster
Class : sjv-i-caret-vanster
Content : "\e936"
Caret höger
Class : sjv-i-caret-hoger
Content : "\e937"
Kamera
Class : sjv-i-kamera
Content : "\e93f"
Anteckning
Class : sjv-i-anteckning
Content : "\e940"
Filter
Class : sjv-i-filter
Content : "\f0b0"
Tabell kolumner
Class : sjv-i-tabell-kolumner
Content : "\e942"
Öga check
Class : sjv-i-oga-check
Content : "\e944"
Öga streck
Class : sjv-i-oga-streck
Content : "\e945"
Öga
Class : sjv-i-oga
Content : "\e946"
Öga kryss
Class : sjv-i-oga-kryss
Content : "\e94a"
Använd dessa ikoner när du vill att användaren ska ladda ner en fil. Placera ikonen till vänster om texten som förklarar vad som ska laddas ner.
I löpande text ska du inte använda ikoner.
Wordfil
Class : sjv-i-wordfil
Content : "\e92b"
Fil
Class : sjv-i-fil
Content : "\e90c"
Filarkiv
Class : sjv-i-filarkiv
Content : "\e90d"
Ljudfil
Class : sjv-i-ljudfil
Content : "\e918"
Kodfil
Class : sjv-i-kodfil
Content : "\e915"
Excelfil
Class : sjv-i-excelfil
Content : "\e90a"
Bildfil
Class : sjv-i-bildfil
Content : "\e902"
Powerpoint-fil
Class : sjv-i-powerpoint-fil
Content : "\e920"
PDF-fil
Class : sjv-i-pdf-fil
Content : "\e91e"
Videofil
Class : sjv-i-videofil
Content : "\e92a"
Filexport
Class : sjv-i-filexport
Content : "\e943"