Denne veiledningen er for innholdsprodusenter på eksterne nettsider. Knapperad ikonerbrukes til å navigere videre fra en side, og brukes kun på hovedsider, for eksempel på NTNUs forside eller hovedsiden for forskning.

Kode for ikoner koner finner du på https://fontawesome.com/v5/icons/
NB! Bruk Font Awesome versjon 5, av typen html.
F.eks. <i class="fas fa-university"></i>.

Slik legger du til Knapperad ikoner

Etter at du har lagt til web-innholdvisning på siden, kan du velge «Knapperad ikoner».

Trykk på +-tegnet for å legge til web-innholdvisning og velg Knapperad ikoner.

• Tittel: Dette blir overskriften, som ligger over raden med ikoner.
• Sammendrag: Dette inneholder valgfri tekst og bilde. Som standard anbefales det at feltet blir stående tomt. Kan brukes som beskrivelse av bruken av widgeten i denne sammenhengen.
• Skjul overskrift: Med eller uten overskriften.
• Skjul beskrivelse: Med eller uten sammendrag.
• Antall knapper: Angi hvor mange knapper som skal vises på én rad i desktop-modus. 3, 4, 5 eller 6.
• Fargevariant: Velg fargetema for ikonene.
  • Hvit (standard) – Blå tekst og ikon
  • Blå – Hvit tekst og ikon
  • Svart – Hvit tekst og ikon
  • Grønn (UB) – Variant for bibliotekets sine sider
  • GUL (VM) – Variant for Vitenskapsmuseet
• Knapp: Legg til så mange knapper du har valgt i innstillingen "Antall knapper" (eller multipler av 2 for å få jevne rader).
  • Knappens tekst: Her legger du teksten som vises under ikonet
  • Fontawesone versjon 5 ikon: Her legger du in koden du kopiert fra fontaswesome. Krav: bruk font awesome versjon 5, av typen html. F.eks. <i class="fas fa-university"></i>
  • Lenke: Lenken som ikonet skal videresende til. Husk å inkludere http:// eller https://

Hvordan ser det ut?

På en stor skjerm vises en horisontal rad med knapper, der ikonet er plassert over teksten. På smale skjermer, som mobiltelefoner, vises en vertikal knapprad med ikonet til venstre og teksten til høyre. Hver knapp lenker videre til en URL. Du kan velge antall knapper per full rad (på en bred skjerm) og hvilket fargetema knappene skal ha.

Eksempel: