Bootstrap 5 icons lokal

Hallo,

Wie kann man die Bootstrap 5 icons lokal benutzen. (bootstrap-icons-1.2.0)

Folgendes habe ich gemacht:

Fonts im Ordner Fonts meines Template (Cassiopeia Kopie) eingefügt.

bootstrap-icons.woff

bootstrap-icons.woff2

Font-face in der user.css eingefügt:

@font-face {
    font-family: 'bootstrapicons';
    src: url('../fonts/bootstrap-icons.woff2') format('woff2'),
         url('../fonts/bootstrap-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

bootstrap-icons.css im CSS Ordner eingefügt.

Folgender Code wird benutzt :

<i class="bi bi-display"></i>

Icons sind nicht sichtbar.

Müssen noch die svg icons lokal ? Wenn ja, wo kommen die icons hin ?

Von hier wurde das Packet geladen:

Bootstrap Icons v1.2.0

Our latest Bootstrap Icons release includes dozens of new icons, redesigned documentation, and the most highly requested new feature—icon fonts! New social…

blog.getbootstrap.com

(Download just the SVGs and fonts)

Danke drmenzelit ,

Ich denke du meinst ich sollte noch etwas in de index.php meines Template anpassen ? Was genau weiss ich nicht.

Werde es mir morgen mal anschauen

------

Danke WM-Loose ,

Gut zu wissen. Doch im Moment weiss ich nicht mal ob ich die svg icons lokal und wo ich diese laden müsste.

Ok, habe jetzt folgender Code in der index.php eingefügt:

<?php
    JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template .
    '/css/bootstrap-icons.css');
?>

Es ist also schon besser da jetzt ein «Platzhalter» zu sehen ist, aber das Icon immer noch nicht.

In welchen Ordner gehören die svg icons den hin ?

Wow, vielen Dank Re:Later ,

Es funktioniert, svg icons sind sichtbar, ganz ohne @font-face in der user.css

Fonts Ordner im Ordner meinTemplate/css abgelegt.

Keine svg Bilder lokal nötig

Ok, also etwas stimmt doch noch nicht. Denke hatte einen Cache Problem. Habe alles wie im Post #8

Werde morgen weiter versuchen...

Danke drmenzelit ,

Dort hast du auch 2 zusätzliche css Dateien (icons.css und icons.min.css)

habe ich kopiert und in meinem css Ordner eingefügt.

Folgende Anweisung habe ich bei mir in der index.php von dir kopiert, doch ich bekomme eine 404, diesen Code kann ich nicht 1 zu 1 benutzen denke ich.

Dein Template ist unter media/….

Mein Template unter template/templateName

// Load Icons
if ($params->get('icons') == 1)
{
    $wa->useStyle('fontawesome');
    $this->getPreloadManager()->preload($wa->getAsset('style', 'fontawesome')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
}
elseif ($params->get('icons') == 2)
{
    $wa->registerAndUseStyle('bi-icons', $templatePath . '/css/bootstrap-icons.css');
    $wa->registerAndUseStyle('icons', $templatePath . '/css/icons.css');
    $this->getPreloadManager()->preload($wa->getAsset('style', 'bi-icons')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
    $this->getPreloadManager()->preload($wa->getAsset('style', 'icons')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
}

Ja, ich benutzte eine Kopie vom Cassiopeia wie unter #1 und meine Assets befinden sich unter template/meinTemplate

Was heisst dass jetzt für meinen Fall ? Kann ich dein Beispiel vom Nature Template nicht benutzen ?

Vielen Dank für deine Hilfe drmenzelit ,

Jetzt ist es zu spät für ein Child, die template Kopie ist schon länger online.

Aber mit deinem Code funktioniert es

Ich hatte den Code gemäss #4 aus folgende Seite kopiert:

Rheinwerk Computing :: Joomla! 3 - Layout und Design anpassen

nehme jetzt an, dass diese Anleitung für J4 nicht mehr gültig ist ?

Gibt es auch solche Anleitungen für J4 ?