Use el ícono Font Awesome como contenido CSS


279

Quiero usar un icono de Font Awesome como contenido CSS, es decir,

a:before {
    content: "<i class='fa...'>...</i>";
}

Sé que no puedo usar el código HTML content, así que ¿solo quedan imágenes?


Desde la memoria no puede inyectar HTML en el DOM utilizando el atributo de contenido. Simplemente texto antiguo.
Mike Causer

Respuestas:


634

Actualización para FontAwesome 5 Gracias a Aurelien

Debe cambiar font-familya Font Awesome 5 BrandsOR Font Awesome 5 Free, según el tipo de icono que está tratando de representar. Además, no olvides declararfont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

Manifestación

Puede leer el resto de la respuesta a continuación para comprender cómo funciona y conocer algunas soluciones para el espacio entre el icono y el texto.


FontAwesome 4 y menos

Esa es la forma incorrecta de usarlo. Abra la hoja de estilo de fuente impresionante, vaya a la classfuente que desea usar fa-phone, por ejemplo , copie la propiedad de contenido en esa clase con la entidad y úsela como:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Manifestación

Solo asegúrate de que si estás buscando apuntar a una aetiqueta específica , entonces considera usar un classlugar para hacerlo más específico como:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

Usando el camino anterior pegará el ícono con el texto restante, así que si desea tener un poco de espacio entre los dos, hágalo display: inline-block;y use algunos padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Ampliando esta respuesta aún más, ya que muchos podrían tener el requisito de cambiar un ícono al pasar el mouse, por lo que para eso, podemos escribir un selector y reglas de :hoveracción por separado :

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

Manifestación

Ahora, en el ejemplo anterior, los íconos se empujan debido al tamaño diferente y seguramente no lo desea, por lo que puede establecer una widthdeclaración fija en la base como

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

Manifestación



Con font-family: FontAwesome;esto cambia la fuente de las etiquetas de anclaje también. ¿Cómo podemos manejar eso?
Shubh

@Shubh leyó el código cuidadosamente, font-familyse supone que debe ser llamado en :beforepseudo y no en la etiqueta de anclaje
Sr. Alien

Solo pensé agregar aquí que puedes encontrar la especificación Unicode para un ícono en particular sin tener que buscar en la fuente. Simplemente vaya a la lista de iconos en el sitio web de Font Awesome y haga clic en el icono que desee. Verá el valor Unicode en la página justo debajo de las muestras del icono: fortawesome.github.io/Font-Awesome/icon/pencil-square-o
Allen Underwood

Esta lista de CSS Unicode para FontAwesome es mejor: astronautweb.co/snippet/font-awesome porque muestra los contentcódigos correctos para la copia directa (es decir, una obviedad). PD: ¿Todavía me pregunto por qué los chicos de FontAwesome no ponen los códigos de contenido en cada página de iconos?
Kai Noack

25

Puede encontrar otra solución sin tener que jugar manualmente con los caracteres Unicode en Making Font Awesome awesome: usar iconos sin etiquetas i ( descargo de responsabilidad: escribí este artículo ).

En pocas palabras, puede crear una nueva clase como esta:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    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);
}

Y luego úselo con cualquier ícono, por ejemplo:

<a class="icon fa-car" href="#">This is a link</a>

23

Si tiene acceso a archivos SCSS desde font-awesome, puede usar esta solución simple:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}


3

Puede usar unicode para esto en CSS. Si está utilizando font awesome 5, esta es la sintaxis;

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

Puedes ver su documentación aquí .


3

Debería tener el peso de fuente establecido en 900 para que Font Awesome 5 Free font-family funcione.

Este es el que funciona:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

1

Como dice en el sitio web FontAwesome FontAwesome =>

HTML:

<span class="icon login"></span> Login</li>

CSS:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

En .login::before-> editar content:'';para adaptarse a su Unicode.


1

Actualización para Font Awesome 5 usando SCSS

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

0

Aquí está mi solución webpack 4 + font awesome 5:

plugin de paquete web:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

estilo css global:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}
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.