Icono Font awesome dentro de la entrada
Contenidos
El uso de iconos en formularios web mejora la usabilidad de los formularios, ya que los iconos añaden reconocibilidad a los campos del formulario. A menudo, los elementos visuales son más fáciles de entender y atraen a más gente que las palabras. Los usuarios pueden averiguar al instante lo que se pide en el campo del formulario con sólo mirar el icono dentro del campo del formulario. En este tutorial, vamos a utilizar FontAwesome para hacer los formularios web más fáciles de usar y añadir un toque de personalidad. FontAwesome es un popular kit de herramientas de iconos que ofrece una gran variedad de iconos. Dado que es fácil de usar y altamente personalizable, se puede utilizar de muchas maneras en un proyecto de desarrollo web.
Es importante que incluyas el CDN de Font Awesome en cualquier página web en la que pretendas utilizar iconos de Font Awesome. Simplemente copia y pega el enlace de abajo e inclúyelo en tu(s) página(s) web para activar Font Awesome. El código de abajo también incluye el CDN de Bootstrap.
Arriba, tenemos un simple formulario de acceso con dos campos de entrada: email/nombre de usuario y contraseña. En la parte superior tenemos un elemento div que contiene el logotipo. Usted puede simplemente cambiar el enlace de la imagen con su propio enlace de la imagen del logotipo. Debajo tenemos nuestro elemento formulario. Tenemos dos contenedores div con un nombre de clase de forma-grupo. Dentro de estos contenedores div, tenemos tres elementos.
¿Cómo pongo color de fondo en los iconos de Font Awesome?
Básicamente, apilas el icono que quieras encima de su icono fa-circle. Luego puedes estilizar el círculo independientemente del icono y cambiarlo al color que quieras.
¿Cómo añado un icono de Font Awesome dentro de un campo de entrada?
El icono font-awesome puede colocarse utilizando el prefijo fa antes del nombre del icono. Ejemplo: En este ejemplo, tomaremos un formulario donde el campo de entrada es necesario. Después de eso, vamos a colocar el icono de font-awesome dentro del campo de entrada. Utilizaremos el enlace CDN para utilizar los iconos font-awesome.
Font awesome css content
Cuando se utiliza el brillante Font Awesome, ¿cómo puedo hacer que los iconos no sean transparentes – por ejemplo, si quiero usar http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/ pero no tener la “flecha hacia arriba” dentro del círculo negro sea transparente sino de color sólido (blanco)?
Como xavier señaló más adelante, font-awesome tiene iconos apilados que le permitirá poner un círculo detrás de un icono sin necesidad de utilizar un hack. Esencialmente, se apila cualquier icono que desee en la parte superior de su icono fa-círculo. Entonces puedes estilizar el círculo independientemente del icono y cambiarlo al color que quieras.
Desgraciadamente, todo el icono se considera un único “carácter” en la página y, como tal, no tienes un control tan granular sobre él. Simplemente puedes establecer una única propiedad “color” para establecer el color del carácter/icono que desees.
Ahora bien, es posible hacer un truco creativo. Dado que el centro del personaje es transparente, puede establecer un fondo de color detrás del personaje para que parezca que el centro es de un color diferente haciendo algo como esto:
Impresionante color de fondo
Otra forma de encontrar el nombre de la fuente es hacer clic con el botón derecho del ratón en un icono de ejemplo de font awesome en tu página y obtener el nombre de la fuente (de la misma forma que se puede encontrar el código utf-8 del icono, pero ten en cuenta que puedes encontrarlo en :antes).
Esto funcionará en casi todos los navegadores populares excepto Internet Explorer hasta Internet Explorer 7, donde casi no tienes suerte. Digo “casi” porque estos navegadores todavía soportan la propiedad border-collapse, que fusiona los bordes de las celdas contiguas de la tabla. Si estás intentando eliminar el espacio entre celdas (es decir, cellspacing=”0″), entonces border-collapse:collapse debería tener el mismo efecto: ningún espacio entre las celdas de la tabla. Sin embargo, este soporte tiene errores, ya que no anula el atributo HTML cellspacing existente en el elemento de tabla.
En resumen: para los navegadores que no sean Internet Explorer 5-7, el espaciado entre bordes lo maneja usted. Para Internet Explorer, si tu situación es la adecuada (quieres un espaciado de celdas 0 y tu tabla no lo tiene ya definido), puedes usar border-collapse:collapse.
Añadir fuente awesome en css
Font Awesome es una colección de iconos que es, bueno, impresionante – que incluye cerca de 4.000 iconos que son increíblemente fáciles de usar, alrededor de 1.300 de los cuales son de código abierto y libre de usar en cualquier aplicación. Como programador de Vue.js, esta biblioteca me pareció una forma excelente de darle un toque especial a la aplicación que estoy desarrollando.
En este artículo, vamos a repasar los métodos para utilizar los iconos de Font Awesome en una aplicación Vue, el contraste entre ellos, y luego repasaremos un par de metodologías específicas de Vue para el uso de iconos. Font Awesome es compatible con Vue 2 y Vue 3. Para esta demo, lo implementaremos en Vue 3.
Al desarrollar una aplicación Vue.js, lo más probable es que estemos ensamblando componentes usando npm (el gestor de paquetes de facto para Node.js) y usando webpack para la aplicación. Aquí hay un repositorio de GitHub que contiene el código discutido en este artículo.
Esto obtiene el objeto de biblioteca y carga el icono del teléfono desde el paquete free-solid-svg-icons. Ese icono se añade más tarde a la biblioteca. A continuación, cargamos FontAwesomeIcon, que es el componente de Vue, y lo registramos con Vue como un componente global. Finalmente, configuramos la aplicación para renderizar.