Utilice los iconos de Font Awesome en CSS

Tengo un CSS que se ve así:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Me gustaría reemplazar la imagen con un ícono de Font Awesome .

No veo de todos modos usar el icono en CSS como imagen de fondo. ¿Es posible hacerlo suponiendo que las hojas de estilo / fuentes Font Awesome estén cargadas antes de mi CSS?

No puede usar el texto como imagen de fondo, pero puede usar las :beforeo :afterpseudo clases para colocar un carácter de texto donde lo desee, sin tener que agregar todo tipo de marcado extra desordenado.

Asegúrese de configurar position:relativesu envoltorio de texto real para que el posicionamiento funcione.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

EDITAR:

Font Awesome v5 utiliza otros nombres de fuente que las versiones anteriores:

• Para FontAwesome v5, versión gratuita, use: font-family: "Font Awesome 5 Free"
• Para FontAwesome v5, versión Pro, use: font-family: "Font Awesome 5 Pro"

Tenga en cuenta que también debe establecer la misma propiedad de peso de fuente (parece ser 900).

Otra forma de encontrar el nombre de la fuente es hacer clic con el botón derecho en un ícono impresionante de fuente de muestra en su página y obtener el nombre de la fuente (de la misma manera que se puede encontrar el código del icono utf-8, pero tenga en cuenta que puede encontrarlo en :before).

Además de la respuesta de Diodeus anterior, necesita la font-family: FontAwesomeregla (suponiendo que ya tenga la @font-faceregla para FontAwesome declarada en su CSS). Entonces se trata de saber qué valor de contenido CSS corresponde a qué icono.

Los he enumerado todos aquí: http://astronautweb.co/snippet/font-awesome/

En realidad, incluso font-awesomeCSS tiene una estrategia similar para configurar sus estilos de iconos. Si desea obtener una copia rápida del icon código , verifique el non-minified font-awesome.cssarchivo y allí están ... cada fuente en su pureza.

Consolidando todo lo anterior, la siguiente es la clase final que funciona bien

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Puedes probar esta clase de ejemplo. y encuentre el contenido del ícono aquí: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

Para usar Font Awesome usando CSS, siga los pasos a continuación:

paso 1 - Agregue fuentes de FontAwesome en CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Paso - 2 Use debajo de CSS para aplicar la fuente en el elemento de clase de HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

Y finalmente, use la clase " sorting_asc " para aplicar el CSS en la etiqueta / elemento HTML deseado.

No es necesario incrustar contenido en el CSS. Puede poner el contenido de la insignia dentro del elemento fa, luego ajustar la insignia css. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

Alternativamente, si usa Sass, uno puede "extender" los íconos de FA para mostrarlos:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

Enlace de ejemplo: https://codepen.io/bungeedesign/pen/XqeLQg

Obtenga el código del icono de: https://fontawesome.com/cheatsheet?from=io

Para esto solo necesita agregar contentatributo yfont-family atributo al elemento requerido a través de: before o: after donde corresponda.

Por ejemplo: quería adjuntar un icono de archivo adjunto después de todo el aelemento dentro de mi publicación. Entonces, primero necesito buscar si ese ícono existe en fontawesome. Como en el caso lo encontré aquí , es decir fa fa-paperclip. Luego haría clic derecho en el ícono allí, e iría a la ::beforepseudo propiedad para obtener la contentetiqueta que está usando, que en mi caso encontré \f0c6. Entonces usaría eso en mi CSS de esta manera:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

Use el siguiente programa de Python a través de la línea de comandos para crear imágenes png a partir de iconos de Font-Awesome:

https://github.com/Pythonity/font-awesome-to-png