Agregar iconos a un proyecto de ASP.NET Core
Los elementos gráficos de las aplicaciones web le dan un atractivo adicional a nuestra interfaz gráfica. Un elemento que puede mejorar significativamente la apariencia de tu sitio web son los iconos. En este tutorial te mostramos como usar agregar los iconos Feather y Fontaweosme a un proyecto de ASP.NET Core. Feather es un conjunto de 274 iconos en formato SVG.
La plantilla para crear una aplicación ASP.NET Core viene integrada con Bootstrap 4 que precisamente desde esta versión dejo de incluir los iconos y los iconos de Feather están dentro de una de las opciones recomendadas para sustituir a los que estaban incluidos en versiones anteriores de Bootstrap.
Partimos de un nuevo proyecto ASP.NET Core 3.1 creado en Visual Studio 2019 con control de código fuente para visualizar los cambios realizados. A grandes rasgos el proyecto de ASP.NET Core se crea asi
Archivo > Nuevo proyecto > .NET Core > Aplicación Web ASP.NET Core (Agregar a control de Código Fuente) después seleccionar .NET Core 3.1 > Aplicación Web (MVC)
Cómo instalar Font Awesome en un proyecto de ASP.NET Core LibMan
La librería de iconos más famosa es sin duda es Font Awesome en esta sección te muestro como utilizar la herramienta global para .NET Core de LibMan para instalar Font Awesome dentro de un proyecto MVC de ASP.NET Core. Si prefieres utilizar una interfaz gráfica revisa la sección anterior que utiliza LibMan pero con Visual Studio.
Para instalar LibMan en un proyecto de ASP.NET Core realiza el siguiente procedimiento dentro de la carpeta del proyecto
-
Instalar LibMan como herramienta global:
dotnet tool install -g Microsoft.Web.LibraryManager.Cli -
Inicializa LibMan dentro del proyecto con el comando
LibMan init. Se te solicitara elegir entre los proveedor de CDN disponibles cdnjs, filesystem , jsdelivr ,unpkg. El proveedor default es cdnjs. Esto creara un archivo json con la siguiente contenido.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
}
- Instalar Font Awesome con el comando especificando la ruta donde se guardaran los archivos en este caso wwwroot/lib/font-awesome . La siguiente acción descargara los 46 archivos (hojas de estilos, scripts y fuentes) de Font Awesome desde el CDN. Adicionalmente puedes usar la opción –files para especificar unicamente los archivos que deseas por ejemplo
--files css/all.min.css
libman install [email protected] --destination wwwroot/lib/font-awesome
Al finalizar veras el mensaje la biblioteca "[email protected]" se instaló en "wwwroot/lib/font-awesome". Y el archivo libman.json quedara de la siguiente manera
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/font-awesome"
}
]
}
Con esto ya se puede utilizar la librería en nuestra aplicación puedes agregar en elemento head del archivo del Layout.cshtml. Pero considera que esto agregara la el archivo css a todas las vistas que utilicen este layout.
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css" />
Otra opción que te permite agregar de forma selectiva en cada vista el css es agregan una sección opcional al elemento head con la instruccións @RenderSection("Estilos", required: false) del archivo layout y especificar en cada vista que requiera usar los iconos de la siguiente manera
@section Estilos {
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css" />
}
Cómo cambiar el tamaño de los iconos de Font Awesome
Para cambiar el tamaño de los iconos de Font Awesome puedes utilizar la propiedad font-size y usar alguna de las unidades soportadas como em o px para más detalle visita la font-size en MDN. Por ejemplo para tener un icono 9 veces más grande que el tamaño regular.
<div>
<i class="fas fa-user" style="font-size:9em"></i>
</div>
Aunque colocar los estilos en linea en cada elemento HTML funciona tiene la desventaja que no es reutilizable por lo cual es una mejor idea colocarlo crear una clase CSS en un archivo de estilos.
.icono-9x {
font-size: 9em;
}
<div>
<i class="fas fa-user icono-9x"></i>
</div>
Cómo cambiar el color de los iconos de Font Awesome
Para cambiar el color de los iconos de Font Awesome se usa la propiedad CSS ``color`
.icono-9x-rojO {
font-size: 9em;
color:red;
}
Como para instalar Feather con LibMan
LibMan es el gestor de librearías del lado del client incluido en Visual Studio 2019 que básicamente lo que permite es agregar librerías js y css fácilmente a un proyecto de ASP. NET Core.
-
En el explorador de soluciones dar clic derecho sobre el archivo del proyecto Agregar > Biblioteca del lado del cliente.
-
En la pantalla emergente selecciona cdnjs como proveedor y el Biblioteca coloca [email protected] deja la ubicación default wwwroot/lib/feather-icons/ y presiona aceptar. Esto descargará los archivos de la librería y los colocara en la carpeta wwwroot/lib/feather-icons/ adicionalmente agregar el archivo LibMan.json.
-
Abrir el archivo Layout.cshtml ubicado en la carpeta Views/Shared dentro en el Tag Helper Environment
<environment include="Development">..agregar la siguiente linea para hacer disponibles los iconos de Feather a todas la pagina que hagan referencia a este layout.
<script src="~/lib/feather-icons/feather.js"></script>
- En el segundo Tag Helper Environment
<environment exclude="Development">...
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.17.0/feather.min.js"
asp-fallback-src="~/lib/feather-icons/feather.min.js"
asp-fallback-test="feather"
integrity="sha256-XcN55BkQ8zLrLvJmpE4nPHW+zYKGwW10JaYd7bq49gQ="
crossorigin="anonymous">
</script>
- Por último agrega la siguiente línea al archivo site.js ubicado en e wwwroot/js/
feather.replace();
Con esto ya tenemos listo todo para poder usar los iconos de Feather en nuestro proyecto de ASP .NET Core por ejemplo agrega el siguiente código a el archivo Index.cshtml.
<i data-feather="circle"></i>
El ejemplo Dashboard de Bootstrap 4 usar estos iconos.
Puedes revisar todos los cambios realizados en el Team Explorer y veras que se han hecho: 5 archivos agregados y 3 archivos modificados.