‣ ℰn la redacción de cualquier publicación, siempre habrá secciones de texto que, convenientemente, deben llamar la atención del lector.
‣ Ciertamente que el uso de imágenes, o también de contenedores de color, resulta muy útil.
‣ Pero, un elemento que no suele faltar en muchas publicaciones, son los íconos.
Siempre será de gran utilidad el empleo de íconos para enfatizar ciertos ítems, títulos o sub-títulos dentro de una publicación
‣ El procedimiento es muy sencillo. Primeramente, debes añadir en tu publicación la librería de trabajo, que en este caso es la "2.4.1/css/simple-line-icons.css":
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
‣ Lo demás es "pan comido" pues simplemente con un <span> encapsulas tu texto o título con el ícono de tu preferencia, como se muestra seguidamente:
Nota:
El uso del .icon-login en un título (Método)
‣ No puede negar el lector, que precediendo el título con el ícono, se genera una mayor atención hacia lo que se va a decir. Es parte de la aplicación de la psicología, en el sentido de romper con los "textos planos" sin ninguna variedad, que se hacen monótonos y aburridos.
‣ El HTML es el siguiente:
<h1> <span class="icon-login">Nota:</span></h1>
<p>El uso del .icon-login en un título (Método) </p>
‣ 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.
‣ Hablando metafóricamente, se hace "más amigable" el texto. Porque el empleo de recursos en torno a la presentación, constituye una invitación, una sugestión, muy subliminal, para la lectura.
‣ Para escoger adecuadamente el ícono de tu preferencia, es importante poder visualizarlos, por ello, puedes consultar la tabla que se expone a continuación. «Tabla de Iconos»
‣ La tabla fue elaborada con el siguiente generador https://www.textfixeres.com
‣ La fuente de donde se extrajo la información de los íconos de esta tabla es https://cdnjs.cloudflare.com
| Nombre del ícono | Figura | Nombre del ícono | Figura |
|---|---|---|---|
| .icon-user | .icon-login | ||
| .icon-user-female | .icon-logout | ||
| .icon-user-follow | .icon-check | ||
| .icon-user-following | .icon-clock | ||
| .icon-user-unfollow | .icon-notebook | ||
| .icon-people | .icon-mustache | ||
| .icon-key | .icon-briefcase | ||
| .icon-emotsmile | .icon-mouse | ||
| .icon-phone | .icon-minus | ||
| .icon-menu | .icon-magnet | ||
| .icon-camrecorder | .icon-close | ||
| .icon-options | .icon-energy | ||
| .icon-options-vertical | .icon-event | ||
| .icon-location-pin | .icon-disc | ||
| .icon-direction | .icon-trophy | ||
| .icon-directions | .icon-cursor | ||
| .icon-compass | .icon-grid | ||
| .icon-envelope-letter | .icon-feed | ||
| .icon-envelope-open | .icon-shield | ||
| .icon-arrow-down | .icon-hourglass | ||
| .icon-arrow-left | .icon-docs | ||
| .icon-arrow-right | .icon-doc | ||
| .icon-arrow-up | .icon-puzzle | ||
| .icon-arrow-up-circle | .icon-anchor | ||
| .icon-arrow-left-circle | .icon-fire | ||
| .icon-arrow-right-circle | .icon-badge | ||
| .icon-arrow-down-circle | .icon-bell | ||
| .icon-screen-smartphone | .icon-wallet | ||
| .icon-screen-tablet | .icon-drawer | ||
| .icon-screen-desktop | .icon-eyeglass | ||
| .icon-graduation | .icon-chemistry | ||
| .icon-exclamation | .icon-credit-card | ||
| .icon-organization | .icon-handbag | ||
| .icon-game-controller | .icon-present | ||
| .icon-speedometer | .icon-ghost | ||
| .icon-call-in | .icon-calculator | ||
| .icon-call-out | .icon-diamond | ||
| .icon-magic-wand | .icon-plane | ||
| icon-cursor-move | .icon-support | ||
| .icon-control-start | .icon-question | ||
| .icon-control-rewind | .icon-shuffle | ||
| .icon-control-play | .icon-microphone | ||
| .icon-control-pause | .icon-calendar | ||
| .icon-control-forward | .icon-envelope | ||
| .icon-control-end | .icon-equalizer | ||
| .icon-earphones-alt | .icon-earphones | ||
| .icon-volume-1 | .icon-refresh | ||
| .icon-volume-2 | .icon-settings | ||
| .icon-volume-off | .icon-reload | ||
| .icon-cloud-download | .icon-target | ||
| .icon-cloud-upload | .icon-bubble | ||
| .icon-size-fullscreen | .icon-camera | ||
| .icon-size-actual | .icon-folder | ||
| .icon-symbol-female | .icon-heart | ||
| .icon-symbol-male | .icon-graph | ||
| .icon-book-open | .icon-rocket | ||
| .icon-basket-loaded | .icon-basket | ||
| .icon-action-undo | .icon-umbrella | ||
| .icon-action-redo | .icon-briefcase | ||
| .icon-share-alt | .icon-bubbles | ||
| .icon-pie-chart | .icon-playlist | ||
| .icon-music-tone | .icon-printer | ||
| .icon-music-tone-alt | .icon-speech | ||
| .icon-dislike | .icon-like | ||
| .icon-info | .icon-flag | ||
| .icon-bulb | .icon-eye | ||
| icon-magnifier-remove | .icon-picture | ||
| .icon-magnifier-add | .icon-book-open | ||
| .icon-magnifier | .icon-envelope-open | ||
| .icon-social-twitter | .icon-lock-open | ||
| .icon-social-facebook | .icon-vector | ||
| .icon-social-tumblr | .icon-pencil | ||
| .icon-social-instagram | .icon-map | ||
| .icon-social-soundcloud | .icon-layers | ||
| .icon-social-linkedin | .icon-trash | ||
| .icon-social-pinterest | .icon-frame | ||
| .icon-social-github | .icon-power | ||
| .icon-social-google | .icon-paypal | ||
| .icon-social-reddit | .icon-chart | ||
| .icon-social-skype | .icon-ban | ||
| .icon-social-dribbble | .icon-star | ||
| .icon-social-behance | .icon-link | ||
| .icon-social-foursqare | .icon-lock | ||
| .icon-social-spotify | .icon-home | ||
| .icon-social-stumbleupon | .icon-crop | ||
| .icon-social-youtube | .icon-cup | ||
| .icon-social-dropbox | .icon-note | ||
| .icon-social-vkontakte | .icon-loop | ||
| .icon-social-steam | .icon-wrench |
