Script auf bestimmte Box eingrenzen [FontAwesome]

Jonathan C. · 28. April 2020

Hallo zusammen,

auf meiner Webseite müssen aus Design-Gründen die FontAwesome-Icons in Version 4 verwendet werden.

Lediglich in einer bestimmten Box (Div-Container) sollen die Icons in Version 5 erscheinen.

Wenn ich das Script zur Einbindung der FontAwesome Icons in den Div kopiere, dann ist das Script auf der ganzen Seite wirksam und nicht nur in der bestimmten Box.

Gibt es eine Möglichkeit, das ganze über Javascript einzugrenzen?

Habe das Ganze mal sinngemäß folgendermaßen versucht:

JavaScript

<script>  
    if (document.getElementById( 's1' ) {
        src = "https://kit.fontawesome.com/d33231fe32.js";
    });</script>

Bedeutet, ich möchte abfragen, in welchem Div-Container sich das Script befindet und es nur dann dort ausführen.

Wäre mega nett, wenn mir da jemand weiterhelfen könnte.

Dankeschön im Voraus.

Liebe Grüße

Jonathan C.

timtim · 28. April 2020

Hi Jonathan,

das mit 4 zu 5 müsste gehen, da 4 den fa Präfix nutzt und 5 fab.

Mein Vorschlag wäre es, zunächst die 5er version zu laden und dann die 4er damit "gleiche" klassen durch die 4er Version überschrieben werden.

Und dort wo du 5er Icons nutzen willst, nutzt du das fab prefix und bei den anderen fa. Mit laden meine ich, einfach beide einzubinden ;).

Gib gerne Rückmeldung ob das Funktioniert.

Das einschränken des Scopes ist hier nicht möglich und auch nicht so einfach zu tun, falls du das nur für "bestimmte" divs möchtest, wären wohl Iframes die "einzige" möglichkeit, wenn man sonst kein komisches Scope-Konstrukt bauen möchte.

Grüße

Timo

Jonathan C. · 28. April 2020

Dankeschön für deine Antwort timtim .

Deine Idee, beide Versionen einzubinden funktioniert bei mir leider nicht. Ich verwende die WoltLab Suite, da kann ich dann die normalen 4er Icons nicht so einfach überschreiben.

Ich hätte das für eine SocialMedia-Box gebraucht und habe mich jetzt vom TeamSpeak-Icon (Version 5) getrennt, damit kann ich aber leben.

Das ist ansonsten zu kompliziert.

Aber vielen Dank dir!

basti1012 · 28. April 2020

Um wie viel Icons geht es den ?

Wenn du etwas gedult hast solltest du den html von der 4 er version Icons und die dazu gehöhrige Css hier rein kopieren

https://uncss-online.com/

Der sortiert dir die Css raus die du für den Html brauchst was du da rein kopiert hast.

Das gleiche machst du mit den 5er Icons mit der dazu gehöhrigen Css.

Danach hast du nur noch die Css die du für deine icons brauchst und somit nee menge aussortiert.

Dann etwas testen und ausortieren was gleiche Css ist ( ggf anpassen ) und gut ist .

So brauchst du auch nur die Css die du wirklich brauchst und nicht ganze Css Datein einbinden die gar nicht ganz gebraucht werden.

Jenachdem um wieviele Icons es geht würde ich es so versuchen

Script auf bestimmte Box eingrenzen [FontAwesome]

Jetzt mitmachen!

Teilen