# Font Awesome

## Pro

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

1. Skapa .npmrc

   Skapa en .npmrc fil (se exempel nedan) i rooten, och lägg in kundens authToken.

   **.npmrc**

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

2. Installera

   Installera Font Awesome Pro via terminalen:

   ```sh
   npm i @fortawesome/fontawesome-pro
   ```

3. Webbfonter

   Själva fonterna för Font Awesome kommer läggas upp som webbfonter i Sitevision.

   1. Gå till [Webbfonter](https://help.sitevision.se/siteWebFontFamiliesHelp.html) 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.

4. 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`.

   **main.scss**

   ```scss
   @import 'vendor/fontawesome';
   ```

   **\_fontawesome.scss**

   ```scss
   @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';
   ```

   **\_light.scss**

   ```scss
   /* 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.

1. Installera

   Installera Font Awesome Free via terminalen:

   ```sh
   npm i @fortawesome/fontawesome-free
   ```

2. Webbfonter

   Själva fonterna för Font Awesome kommer läggas upp som webbfonter i Sitevision.

   1. Gå till [Webbfonter](https://help.sitevision.se/siteWebFontFamiliesHelp.html) under Webbplatsinställningar i Sitevision.
   2. Skapa upp en ny fontfamilj med namnet ‘Font Awesome 6 Free’.
   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.

3. 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`.

   **main.scss**

   ```scss
   @import 'vendor/fontawesome';
   ```

   **\_fontawesome.scss**

   ```scss
   @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';
   ```

   **\_regular.scss**

   ```scss
   /* 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.

1. Installera

   Installera antingen Pro eller Free enligt ovan och läs in fonter + scss.

2. Webbfonter

   Själva fonterna för Font Awesome Brands kommer läggas upp som webbfonter i Sitevision.

   1. Gå till [Webbfonter](https://help.sitevision.se/siteWebFontFamiliesHelp.html) 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)”.

3. 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`.

   **\_brands.scss**

   ```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

1. Avinstallera

   Avinstallera Font Awesome Pro via terminalen.

   ```sh
   npm remove @fortawesome/fontawesome-pro
   ```

2. .npmrc

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

   **.npmrc**

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

3. Webbfonter

   Gå till [Webbfonter](https://help.sitevision.se/siteWebFontFamiliesHelp.html) under Webbplatsinställningar i Sitevision och plocka bort fontfamiljen “Font Awesome 6 Pro”.

4. Installera Free

   Installera och sätt upp [Free](#free) enligt ovan.

5. 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.