Alinear texto al lado de FontAwesome Icon

Estuvimos investigando por el mundo on line y así mostrarte la respuesta para tu dilema, en caso de alguna duda puedes dejarnos tu inquietud y te responderemos porque estamos para servirte.

Solución:

Hay una manera muy fácil si su fontawesome tiene el mismo tamaño de fuente que su texto (generalmente es una buena práctica), incluya las etiquetas en las etiquetas de texto:

  
 Text text text

	
	
	

	
	
	

Para tener un control completo/independiente sobre la posición del icono de fuente impresionante, intente algo como a continuación.

Método 1: Usando absolute positioning

1. Agregar position with a property value de relative hacia h3 estilo para controlar la superposición.

2. Usar :after selector content para insertar el icono

3. Agregar position with a property value de absolute hacia h3 :después del bloque de código CSS

4. Consiga la posición deseada con valores de propiedad izquierdo, derecho, superior o inferior.

Método 2: Usando float(Más fácil).

1. Usar :after selector content valor para insertar el icono

2. Consiga la posición deseada del icono haciendo flotar el :before selector a la derecha o a la izquierda.

/* Using absolute positoinning */

h3.absolute 
  position: relative; /* Helps us control overlap */
  padding-left: 25px; /* Creates space for the Phone Icon */
  

 h3.absolute:before 
  content: 'f095';
  font-family: fontAwesome;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 3px; /* Adjust as needed */
  
  
 /* Using float */

  h3.float 
  font-size: 24px;
  color: red;
  

 h3.float:before 
  content: 'f095';
  font-family: fontAwesome;
  float: left; /* Depends on the side we want the icon */
  margin-right: 10px; /* Creates space between the icon and the text */
  font-size: 24px;
  height: 32px;
  line-height: 32px; /* Same as the font size */
  
  
  
  /* Below code is jsut for differentiation of methods */
  strong 
  font-size: 24px;
  text-decoration: underline;
  display: block;
  width: 100%;
  
  
  strong:last-of-type 
  color: red;
  

Using absolute Positioning
Call us

Using float
Call us

Nota: Puedes ajustar el tamaño del icono con CSS font-size El valor de la propiedad.

Prueba esto :

Al final de todo puedes encontrar las reseñas de otros desarrolladores, tú además eres capaz mostrar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador