Font Awesome

Pro

Följ dessa steg för att installera Font Awesome Pro i ett projekt.

Skapa .npmrc
Skapa en .npmrc fil (se exempel nedan) i rooten, och lägg in kundens authToken.
.npmrc
```
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN
```
Installera
Installera Font Awesome Pro via terminalen:
Terminal window
```
npm i @fortawesome/fontawesome-pro
```
Webbfonter
Själva fonterna för Font Awesome kommer läggas upp som webbfonter i Sitevision.
1. Gå till Webbfonter under Webbplatsinställningar i Sitevision.
2. Skapa upp en ny fontfamilj med namnet ‘Font Awesome 6 Pro’.
3. Välj “Lägg till webbfont” och navigera till ./node_modules/@fortawesome/fontawesome-pro/webfonts.
4. Lägg till de vikter som kommer användas på webbplatsen.

Sass

Läs in den Sass som behövs för de vikter som ska användas.
Eftersom Sitevision sköter @font-face-deklarationen behöver vi ta en kopia av ./node_modules/@fortawesome/fontawesome-pro/scss/{vikt}.scss och plocka bort denna samt eventuella importer då dessa sköts i _fontawesome.scss.

@import 'vendor/fontawesome';

@import 'node_modules/@fortawesome/fontawesome-pro/scss/functions';
@import 'node_modules/@fortawesome/fontawesome-pro/scss/variables';
@import 'node_modules/@fortawesome/fontawesome-pro/scss/fontawesome';
@import 'light';

/* Detta är en kopia av ./node_modules/@fortawesome/fontawesome-pro/scss/light.scss
* excl. @font-face deklaration då detta görs i Sitevision.
*/

/*!
* Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
* Copyright 2023 Fonticons, Inc.
*/

:root, :host {
  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
  --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
}

.fal,
.#{$fa-css-prefix}-light {
  font-weight: 300;
}

Källa: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

Free

Följ dessa steg för att installera Font Awesome Free i ett projekt.

Installera
Installera Font Awesome Free via terminalen:
Terminal window
```
npm i @fortawesome/fontawesome-free
```
Webbfonter
Själva fonterna för Font Awesome kommer läggas upp som webbfonter i Sitevision.
1. Gå till Webbfonter under Webbplatsinställningar i Sitevision.
2. Skapa upp en ny fontfamilj med namnet ‘Font Awesome 6 Pro’.
3. Välj “Lägg till webbfont” och navigera till ./node_modules/@fortawesome/fontawesome-free/webfonts.
4. Lägg till de vikter som kommer användas på webbplatsen.

Sass

Läs in den Sass som behövs för de vikter som ska användas.
Eftersom Sitevision sköter @font-face-deklarationen behöver vi ta en kopia av ./node_modules/@fortawesome/fontawesome-free/scss/{vikt}.scss och plocka bort denna samt eventuella importer då dessa sköts i _fontawesome.scss.

@import 'vendor/fontawesome';

@import 'node_modules/@fortawesome/fontawesome-free/scss/functions';
@import 'node_modules/@fortawesome/fontawesome-free/scss/variables';
@import 'node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import 'regular';

/* Detta är en kopia av ./node_modules/@fortawesome/fontawesome-free/scss/regular.scss
* excl. @font-face deklaration då detta görs i Sitevision.
*/

/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
* Copyright 2023 Fonticons, Inc.
*/

:root, :host {
  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
  --#{$fa-css-prefix}-font-light: normal 400 1em/1 '#{ $fa-style-family }';
}

.far,
.#{$fa-css-prefix}-regular {
  font-weight: 400;
}

Källa: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

Brands

Följ dessa steg för att installera Font Awesome Brands i ett projekt.

Installera
Installera antingen Pro eller Free enligt ovan och läs in fonter + scss.
Webbfonter
Själva fonterna för Font Awesome Brands kommer läggas upp som webbfonter i Sitevision.
1. Gå till Webbfonter under Webbplatsinställningar i Sitevision.
2. Skapa upp en ny fontfamilj med namnet ‘Font Awesome 6 Brands’.
3. Välj “Lägg till webbfont” och navigera till ./node_modules/@fortawesome/fontawesome-{pro/free}/webfonts.
4. Ladda upp fa-brands-400.woff2 med vikten “Normal (400)”.

Sass

Läs in den Sass som behövs för de vikter som ska användas.
Eftersom Sitevision sköter @font-face-deklarationen behöver vi ta en kopia av ./node_modules/@fortawesome/fontawesome-{pro/free}/scss/brands.scss och plocka bort denna samt eventuella importer då dessa sköts i _fontawesome.scss.

/* Detta är en kopia av ./node_modules/@fortawesome/fontawesome-free/scss/brands.scss
*  excl. @font-face deklaration då detta görs i Sitevision.
*/

/*!
* Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
* Copyright 2023 Fonticons, Inc.
*/

:root, :host {
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
}

.fab,
.#{$fa-css-prefix}-brands {
  font-weight: 400;
}

@each $name, $icon in $fa-brand-icons {
  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
}

Från Pro till Free

Följ denna guide om en kund behöver nedgradera till Font Awesome Free

Avinstallera
Avinstallera Font Awesome Pro via terminalen.
Terminal window
```
npm remove @fortawesome/fontawesome-pro
```

.npmrc

Plocka bort det som är Font Awesome relaterat i .npmrc.

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN

Webbfonter
Gå till Webbfonter under Webbplatsinställningar i Sitevision och plocka bort fontfamiljen “Font Awesome 6 Pro”.
Installera Free
Installera och sätt upp Free enligt ovan.
Byt ut ikoner
Byt ut alla Pro-ikoner till Free, är ikonen av typen fa-light eller fa-regular kan den ändras till fa-solid. Glöm inte ikoner som ligger redaktionellt i Sitevision.