fontawesome local speichern

Motto: sie viel wie nötig, so wenig wie möglich. Das komplette Paket wird du wohl kaum brauchen.

Zitat von Lupus_III

Das war jetzt mal wieder eine Antwort mit der niemand was anfangen kann.

Damit kann man sehr wohl etwas anfangen, wenn man denn mitdenkt. Ich weiß nicht, in welchem Paket die von dir genötigten Icons liegen, aber das lässt sich herausfinden. Und wenn man das weiß, dann führt man einen Download selektiv aus und somit habe ich nur das, was ich wirklich brauche.

Hi Lupus,

ich habe zwar noch nie Font Awesome benutzt, mir das grad aber mal angeschaut.

Da die Lizenz der Free-Version entsprechend offen ist, würde ich es so machen:

Eine eigene CSS erstellen und nur das was ich brauche da hineinpacken, z.B. so:

/*!
 * Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */

:root, :host
{
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';

  --fa-style-family-brands: 'Font Awesome 6 Brands';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
}

@font-face
{
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face
{
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face
{
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}

.fa
{
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
}

.fa,
.fa-classic,
.fa-sharp,
.fas,
.fa-solid,
.far,
.fa-regular,
.fab,
.fa-brands
{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fas,
.fa-classic,
.fa-solid,
.far,
.fa-regular
{
  font-family: 'Font Awesome 6 Free';
}

.far,
.fa-regular
{
  font-weight: 400;
}

.fas,
.fa-solid
{
  font-weight: 900;
}

.fab,
.fa-brands
{
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

/* Hier die Icons, die gebraucht werden... */
.fa-facebook:before {content: "\f09a";}

Die ttf-Dateien habe ich ausgelassen, da woff2 weit unterstützt wird und die Dateigröße deutlich kleiner ist.

Wenn du nur Icons von einer Schriftart brauchst (nur "regular/solid" oder nur "brands" ), dann die andere natürlich nicht hineinpacken.

Auf der Webseite beim gewünschten Element dann entsprechend die Klassen setzen.

Für Facebook (als Beispiel aus der CSS oben) wäre das dann z.B. class="fab fa-facebook"

Wenn jetzt auch noch Effekte / Animationen gebraucht werden, dann einfach den gewünschten Effekt / die gewünschte Animation mit aus der all.css in die eigene packen und gut ist.

So ist alles was du auf deinem Webspace dann brauchst nur die eigene CSS-Datei und die WOFF2-Datei(en)

Zitat von Lupus_III

Ich hätte lieber gleich bei youtube anfragen sollen.

Warum? Deine Frage lautete:

Zitat von Lupus_III

Wie macht Ihr das in der Praxis?

Und da ist die richtige Antwort:

Zitat von m.scatello

sie viel wie nötig, so wenig wie möglich

Auch das ist ein Hinweis:

Zitat von m.scatello

dann führt man einen Download selektiv aus

Zitat von Lupus_III

... Dann wäre mir dieser Umweg erspart geblieben. Lesson to learn.

Hi Lupus,

wie hast du es jetzt gemacht?

Ah ok.

Wobei ich es für lediglich 3 Icons doch so machen würde wie ich oben erwähnt.

Du brauchst ja weder alles aus dem webfonts-Ordner, noch die tausenden Zeilen aus all.css.