Tutorial Utilizzare BootStrap Icons

Con la versione 5 di Bootstrap sono state rilasciate anche una serie di icone da utilizzare insieme al foglio stile. Per utilizzarle all’interno di una App Web .Net dobbiamo scaricarle dal sito getbootstrap.com e caricarle all’interno del folder lib della wwwroot. Questa operazione con Visual Studio 2022 è estremamente semplificata da una specifica funzionalità. Andiamo a vedere come funziona.

Apriamo un progetto di applicazione Web MVC.

Nel Solution Explorer fate click destro sul nome del progetto, in questo caso FooShop e selezionate Add>Client-Side Library… si aprirà una dialog Add Client-Side Library. Tra le varie opzioni troviamo: Provider; Library; Include all library files e Choose specific files; Target Location.

Per il provider abbiamo la possibilità di scegliere tra “cdnjs”, “filesystem”, “jsdelivr” e “unpkg”. Tranne “filesystem” che fa riferimento chiaramente a file presenti da qualche parte nel nostro sistema, i provider sono noti come repository di librerie Javascript ed uno vale l’altro, a noi scegliere quello che preferiamo. Io non ne faccio una questione particolare e scelgo il primo che capita “cdnjs”. Per la Library inseriamo il nome “bootstrap-icons”. Non c’è bisogno di inserire il nome per intero, mentre scriviamo comparirà una box con una lista di librerie disponibili e tra queste troviamo “bootstrap-icons”, un click per scegliere e nella input box comparirà “bootstrap-icons@[NumeroUltimaVersione]”. Scegliete se includere tutto o specificare quali file scaricare e sotto nella Target Location sarà scritto dove verranno inseriti i file.

Ora la libreria di icone è all’interno del folder wwwroot/lib/bootstrap-icons. Non ci resta che includerla all’interno della nostra applicazione. Andiamo nel layout delle View e inseriamo la riga di codice necessaria. Nel nostro caso apriamo “_Layout.cshtml” nel folder Views/Shared e inseririamo il codice nella box subito dopo il link a bootstrap.

  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

<link rel="stylesheet" href="~/lib/bootstrap-icons/font/bootstrap-icons.css" />

  <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

Adesso per verificarne il funzionamento e l’effetto che generano apriamo “_LoginPartial.cshtml” e modifichiamo hiperlink per accedere al profilo dell’utente loggato.

Sostituiamo l’itera riga con il codice che segue nella box.

<li class="nav-item">

    <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">
        <i class="bi bi-person"></i> @User.Identity?.Name!
    </a>

</li>

F5 per lanciare il Debug e quando si apre la finestra del browser facciamo login al nostro sito. Potrete notare in alto a destra che il nome dell’utente loggato è preceduto da una piccola icona.

Per avere ulteriori informazioni su come utilizzare le bootstrap-icons vi rimando alla pagina ufficiale “https://icons.getbootstrap.com/”.

Questo metodo di inserimento delle librerie Client-Side potrà essere usato per il resto delle librerie Javascript o altro che vorrete includere nel vostro progetto VS2022.

Un’ultima cosa da aggiungere. Abbiamo visto come gestire le librerie lato Client, ma per la gestione di quelle lato Server è dedicata un’altra funzionalità di VS2022. Clickando nel menu Tools>NuGet Package manager>Manage NuGet Package for Solution…

si aprirà la finestra NuGet-Solution dove potrete gestire tutte le librerie Server-Side installate e da installare.

Compresi gli aggiornamenti. Nelle librerie Client-Side l’aggiornamento va fatto reinstallando da capo la libreria.