Evita que el texto se ajuste bajo un icono dentro de un ancla

Estoy intentando crear un enlace que está representado por un icono (estoy usando una fuente impresionante para los icons) y un poco de texto. Si el texto se ajusta a la siguiente línea, lo quiero en línea con el texto, en lugar de aparecer debajo del icono.

He intentado una solución que encontré en esta respuesta y parece funcionar bien para mí

  

Text of the link

i { float: left; } p { overflow: hidden; }

Sin embargo, en Eclipse, donde estoy representando esto (en una página JSP), emite una advertencia (“ubicación no válida de la etiqueta p “) de que no puedo tener una etiqueta de párrafo dentro de un ancla (me parece que es un estándar de HTML5). ).

Usar span lugar de p no parece funcionar.

¿Alguien sabe cómo lograr esto con un span ? ¿O saber de una mejor manera de hacer esto?

Necesito ser compatible con IE8 +, así que no creo que ninguna cosa de flexbox funcione.

Para ser claros me gustaría esto:

 *FA-icon* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed. 

En lugar de esto:

 *FA-icon* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 

Intente configurar su ícono en posición absoluta y agregando relleno a la izquierda de su enlace (con el ancho de su ícono y el margen que desee entre su ícono y su texto). Por ejemplo, si su ícono tiene un ancho de 15px y quiere un margen de 5px entre su ícono y su texto, haga lo siguiente:

 a { position: relative; padding-left: 20px; } i { position: absolute; top: 0; left: 0; } 

Intenta con este código a continuación te puede ayudar.

 p{display: inline;} 
     

Text of the link