Filikoner

Det går inte ändra default filikoner i sitevisions gränssnitt. Med default ikoner så menas ikoner som symboliserar en dokumenttyp i olika moduler, t.ex. relaterad information modulen.

Det går dock att fixa med css, följande exempel letar efter alla a taggar med href som slutar på pdf. Sen är det bara att styla dit någon annan ikon, t.ex. från font awesome:

a[href$="pdf"]:before {
  /*Some css and a font awesome icon*/
}

Exempel med Bootstrap Icons

@mixin linkicon($icon) {
  &::after {
    content: unquote('\"#{ $icon }\"');
    content: unquote('\"#{ $icon }\"') / '';
    @content;
  }
}

.sv-text-portlet-content,
.sv-search-hit {
  a {
    &::after {
      display: inline-block;
      margin-right: 0.1em;
      margin-left: 0.2em;
      font-family: 'bootstrap-icons', sans-serif;
      line-height: 1;
      speak: never;
      vertical-align: -0.125em;
    }

    & > img.sv-linkicon {
      display: none;
      padding-left: 0;
    }
  }

  a:focus {
    outline-offset: 1px;
  }

  a[rel='external'] {
    @include linkicon($bi-box-arrow-in-up-right) {
      margin-left: 0.4em;
      font-size: 0.9em;
    }
  }

  a[href^='http'] {
    @include linkicon($bi-box-arrow-up-right) {
      margin-left: 0.4em;
      font-size: 0.9em;
    }
  }

  a[href$='.pdf' i] {
    @include linkicon($bi-file-earmark-pdf);
  }

  a[href$='.doc' i],
  a[href$='.docm' i],
  a[href$='.docx' i],
  a[href$='.dot' i],
  a[href$='.dotm' i],
  a[href$='.dotx' i] {
    @include linkicon($bi-file-earmark-word);
  }

  a[href$='.xls' i],
  a[href$='.xlsm' i],
  a[href$='.xlsx' i],
  a[href$='.xlt' i],
  a[href$='.xltm' i],
  a[href$='.xltx' i] {
    @include linkicon($bi-file-earmark-excel);
  }

  a[href$='.odb' i],
  a[href$='.pot' i],
  a[href$='.potm' i],
  a[href$='.potx' i],
  a[href$='.ppsx' i],
  a[href$='.ppt' i],
  a[href$='.pptx' i] {
    @include linkicon($bi-file-earmark-ppt);
  }

  a[href$='.avi' i],
  a[href$='.mov' i],
  a[href$='.mp4' i],
  a[href$='.qt' i],
  a[href$='.webm' i],
  a[href$='.wmv' i] {
    @include linkicon($bi-file-earmark-play);
  }

  a[href$='.aiff' i],
  a[href$='.alac' i],
  a[href$='.au' i],
  a[href$='.flac' i],
  a[href$='.m4a' i],
  a[href$='.mp3' i],
  a[href$='.ogg' i],
  a[href$='.ra' i],
  a[href$='.wav' i] {
    @include linkicon($bi-file-earmark-music);
  }

  a[href$='.apng' i],
  a[href$='.bmp' i],
  a[href$='.gif' i],
  a[href$='.jpeg' i],
  a[href$='.jpg' i],
  a[href$='.png' i],
  a[href$='.svg' i],
  a[href$='.webp' i] {
    @include linkicon($bi-file-earmark-image);
  }
}

Exempel med Font Awesome

@use 'sass:string';

@mixin linkicon($icon, $style: light) {
  &::after {
    margin-right: 0.2em;
    margin-left: 0.4em;
    content: string.unquote('\"#{ $icon }\"');

    @if $style == solid {
      font-weight: 900;
    } @else if $style == light {
      font-weight: 300;
    }
  }
}

.sv-text-portlet-content,
.sv-search-hit {
  a {
    &::after {
      display: inline-block;
      font-family: 'Font Awesome 6 Pro', sans-serif;
      font-weight: 500;
      line-height: 1;
      color: currentcolor;
      content: '';
      speak: never;
    }

    & > img.sv-linkicon {
      display: none;
      padding-left: 0;
    }
  }

  a:focus {
    outline-offset: 1px;
  }

  a[href^='http'] {
    @include linkicon($fa-var-external-link);
  }

  a[rel='external'] {
    @include linkicon($fa-var-window-restore);

    /* When a new link is added in Sitevision it's always marked for opening in a new window.
       This data attribute is only avaliable in edit mode and its true, so we hide the icon then */
    .sv-edit-mode &[data-link-external='true']:not([data-link-use-new-window])::after {
      display: none;
    }
  }

  a[href$='.pdf' i] {
    @include linkicon($fa-var-file-pdf);
  }

  a[href$='.doc' i],
  a[href$='.docm' i],
  a[href$='.docx' i],
  a[href$='.dot' i],
  a[href$='.dotm' i],
  a[href$='.dotx' i] {
    @include linkicon($fa-var-file-word);
  }

  a[href$='.xls' i],
  a[href$='.xlsm' i],
  a[href$='.xlsx' i],
  a[href$='.xlt' i],
  a[href$='.xltm' i],
  a[href$='.xltx' i] {
    @include linkicon($fa-var-file-excel);
  }

  a[href$='.odb' i],
  a[href$='.pot' i],
  a[href$='.potm' i],
  a[href$='.potx' i],
  a[href$='.ppsx' i],
  a[href$='.ppt' i],
  a[href$='.pptx' i] {
    @include linkicon($fa-var-file-powerpoint);
  }

  a[href$='.avi' i],
  a[href$='.mov' i],
  a[href$='.mp4' i],
  a[href$='.qt' i],
  a[href$='.webm' i],
  a[href$='.wmv' i] {
    @include linkicon($fa-var-file-video);
  }

  a[href$='.aiff' i],
  a[href$='.alac' i],
  a[href$='.au' i],
  a[href$='.flac' i],
  a[href$='.m4a' i],
  a[href$='.mp3' i],
  a[href$='.ogg' i],
  a[href$='.ra' i],
  a[href$='.wav' i] {
    @include linkicon($fa-var-file-audio);
  }

  a[href$='.apng' i],
  a[href$='.bmp' i],
  a[href$='.gif' i],
  a[href$='.jpeg' i],
  a[href$='.jpg' i],
  a[href$='.png' i],
  a[href$='.svg' i],
  a[href$='.webp' i] {
    @include linkicon($fa-var-file-image);
  }
}