El conocimiento no es como lluvia que nos regala una nube generosa sin esfuerzo alguno. Me refiero a que, todos se benefician de la lluvia sin hacer nada para generarla, pero no ocurre así con el conocimiento, porque cuando se quiere perfeccionar o profundizar en un tema, hay que sumergirse en internet, o, si es posible, recurrir a consultas con personas que dominan el tema. Lo digo porque el tema de los íconos, tiene "mucha tela que cortar" y en esta publicación expongo otro listado de íconos, utilísimos para brindar excelencia pictórica a tus publicaciones.
Yo, en lo personal, aplico el "TRATA DE SUPERAR ESO" cada vez que culmino una publicación, por lo que soy persistente en la búsqueda de recursos que pueda aplicar a mis publicaciones, y, uno de esos "frentes" son precisamente los íconos... porque está muy en la psique humana aquello de "todos tenemos que ser mejores en algo" y estas publicaciones son un punto clave.
Podrás notar que el uso del ícono de nube del párrafo inicial, le confiere una presentación más llamativa, que de alguna forma conlleva al lector a detenerse en dicho párrafo, no solo por ser introductorio, sino para entrar en la connotación que se desprende de dicha imagen.
Es decir, es posible combinar la ilustración de una publicación, con imágenes e íconos, como se aplica en esta publicación. además de balance, aporta el rédito de minimizar el peso de carga de la página derivado de imágenes.
Recomendándote la teoría desarrollada en la parte 1, paso directamente a la aplicación. A modo de ejemplo, ver los siguientes símbolos:
El HTML usado fue:
Debes incluir en la plantilla lo siguiente::
Dicho archivo proviene de https://cdnjs.com/libraries
De manera similar, se trabaja con el resto de los íconos, configurando el título con un <span> como también se puede aplicar al inicio de algún párrafo, para darle notoriedad o crear un alerta.
«Aplicabilidad»
Seguidamente, transcribo las funcionalidades que sobre esta librería se detallan en la página: https://fontawesome.com/v4/examples/
Después de ponerse en marcha, puede colocar los iconos de Font Awesome en casi cualquier lugar con la etiqueta <i> o la <span>. Algunos ejemplos se reutilizan apreciativamente de la documentación de Bootstrap.
«Iconos básicos»
Puede colocar iconos de Font Awesome en casi cualquier lugar utilizando el prefijo CSS y el nombre del icono. Font Awesome está diseñado para ser utilizado con elementos en línea (nos gusta la etiqueta por brevedad, pero usar a es más semánticamente correcto). es igual el resultado, trabajando fa con la etiqueta <i> que con <span> y eso se comprueba de seguido, en los ejemplos 1 y 2 con el ícono user:
El Si cambia el tamaño de fuente del contenedor del icono, el icono se hace más grande. Lo mismo ocurre con el color, la sombra paralela y cualquier otra cosa que se herede usando CSS.
«Iconos más grandes »
Para aumentar el tamaño de los iconos en relación con su contenedor, utilice las clases (aumento del 33 %), , o también:
A continuación un ejemplo:
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
HTML:
Otro procedimiento es a traves de asignar un style con los ajustes de nuestra preferencia, usando indistintimente las etiquetas <i> o la <span>, como se ejemplifica de seguido:
--> 20px color predeterminado
--> 30px, color verde
--> 40 px azul sombreado
El HTML es:
Conviene destacar que estos procedimientos se cumplen con la librería "font-awesome/4.7.0/css/font-awesome.min.css" Se utiliza para establecer iconos en un ancho fijo. Ideal para usar cuando diferentes anchos de iconos desequilibran la alineación. Especialmente útil en cosas como listas de navegación y grupos de listas. el HTML es:
Utilice y reemplace fácilmente las viñetas predeterminadas en listas desordenadas. el HTML es:
Use y/o para extraer fácilmente citas o iconos de artículos. El HTML aplicado es:
1
2
HTML es el siguiente:
<h1> <i class="fa fa-user"> 1</i> </h1>
<h1> <span class="fa fa-user"> 2</span></h1>
<span class="fa fa-user fa-lg"></span> fa-lg </br>
<i class="fa fa-user fa-2x"></i> fa-2x </br>
<i class="fa fa-user fa-3x"></i> fa-3x </br>
<i class="fa fa-user fa-4x"></i> fa-4x </br>
<i class="fa fa-user fa-5x"></i> fa-5x </br>
<i class="fa fa-user" style="font-size:20px;"> </i> --> 20px color predeterminado </br>
<i class="fa fa-user" style="font-size:30px;color:lime;"> </i> --> 30px, color verde </br>
<span class="fa fa-user"style="font-size:40px;color:blue;text-shadow:4px 4px 4pxred;" ></span>-->40px azul sombreado </br>
fa-fw,
«Íconos de lista»
<div class="list-group">
<a class="list-group-item" href="#"> <i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
fa-ul-fa-li
«Iconos bordeados y tirados»
<li><i class="fa-li fa fa-check-square"></li>Ïconos de lista</li>
<li><i class="fa-li fa fa-check-square"<</li>se puede utilizar </li>
<li><i class="fa-li fa fa-spinner fa-spin"<</li>como viñetas</li>
<li><i class="fa-li fa fa-square"<</li>en listas</li>
fa-border, fa-pull-right, fa-pull-left
<div style="font-size:20px; background: #f2f2f2;display:inline;">
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"aria-hidden="true" width:"10px" height?"10px" loading="lazy" class="lazyload" style="display: inline;text-align: center; border:transparent; clear:left;padding-left:2px; font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;float: left;margin-right: 0.3em;margin-left: 2em;" aria-hidden="true"></i<
...Este es un ejemplo del uso del ícono <u>fa-quote-left</u> aplicado a un texto; muy útil como blockquote para una cita.
