Utilice los iconos de Font Awesome en CSS


305

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?


Los glifos de las fuentes no se pueden usar como fondos. Los SVG, sin embargo, pueden
cimmanon

@cimmanon ¿le importaría explicar cómo podría aplicarse a Font-impresionante
BonsaiOak

@BonsaiOak ¿Qué hay que explicar que no esté explicado por la respuesta seleccionada? Si tiene una pregunta a la que esto no responde (o cualquier otra pregunta sobre SO), haga una nueva pregunta.
cimmanon

@cimmanon perdón por la falta de claridad. Parecía implicar que era posible usar un icono del archivo de fuente font-awesome.svg como fondo. Sin embargo, nunca dijiste eso explícitamente, así que no estoy seguro.
BonsaiOak

1
@BonsaiOak Sí, puede usar un SVG como imagen de fondo, de la misma manera que usaría cualquier otra imagen. Sin embargo, en realidad no he mirado el FontAwesome SVG para verificar que pueda usarse de esta manera.
cimmanon

Respuestas:


489

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).


63
El texto equivalente de cada ícono está allí fortawesome.github.io/Font-Awesome/cheatsheet
Matthieu

61
Tendrás que eliminar & # x desde el principio y; desde el final. El nombre de la familia tipográfica es FontAwesome
Matthieu

55
@David, es solo texto, úsalo font-size.
JCM

66
para FontAwesome v5 que necesitas usar .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad

55
Solo una nota de que esto no parece funcionar con elementos de entrada (como un botón de envío) ya que no parecen admitir: before o: after.
Mir

70

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/


1
trabajó después de que eliminé la posición: absoluta; en .element: antes, ahora puedo decorar mis enlaces con íconos de fuentes impresionantes pero mantener mi fuente personalizada del enlace
jethroo

gran lista de valores de contenido!
Anthony

1
Como se señaló en la respuesta de @staabm, FontAwesome mantiene una lista oficial de los códigos para cada glifo: fontawesome.io/cheatsheet
alxndr

24

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.

Captura de pantalla del archivo CSS de Font-Awesome


22

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"; 
    }

mejor respuesta, ya que puede eliminar una etiqueta <i> anterior al texto que desea con el icono y reemplazarla con esta. Y se da el mismo espacio.
andygoestohollywood

7

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";
    }

6

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.


2

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>

8
"No es necesario insertar contenido en el CSS". Bueno, en algunas situaciones es necesario.
Stéphane Bruckert

2
Si no le importa la mejora progresiva, está bien, pero realmente debe mantener su estilo dentro de un archivo css siempre que sea posible.
Adam Carr

2

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.
}


0

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 */
    }

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.