html - tag - Fuente impresionante y Unicode

title label html

Question

Estoy usando (el excelente) Font-Awesome en mi sitio, y está funcionando bien, si lo uso de esta manera:

<i class="icon-home"></i>

Pero (por alguna razón) quiero usarlo de la manera Unicode, como:

<i>&#xf015;</i>

( Hoja de trucos de Font Awesome )

Pero no funciona, el navegador muestra un cuadrado en su lugar.

¿Cómo puedo solucionar esto? La ruta CSS es correcta (ya que la primera forma de utilizar Font Awesome funciona).

Editar: tengo el FontAwesome.otf instalado.

Answer 1

Debes usar la clase fa :

<i class="fa">
&#xf000;
</i>
<i class="fa fa-2x">
&#xf000;
</i>

Answer 2

Descubrí que esto funcionó

content: "/f2d7" !important;
font-family: FontAwesome !important;

No parecía funcionar sin la! Importante para mí.

Aquí hay un tutorial sobre cómo cambiar los íconos sociales con Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be

Answer 3

Después de leer la respuesta de davidhund en esta página, se me ocurrió la solución de que tu fuente web no está cargada correctamente y que yo soy un problema de caminos equivocados.

Esto es lo que dijo:

Mi primera suposición es que incluyes la fuente web FontAwesome de un (sub) dominio diferente. Por lo tanto, asegúrese de establecer los encabezados correctos en esos archivos de fuentes web: "deberá agregar el encabezado Access-Control-Allow-Origin, que incluye el dominio desde el que está retirando el activo". https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

Y también mira la font-gotchas :)

Espero que esté claro y te ayude :)

En la misma página, f135ta dijo:

... Solucioné el problema cargando el archivo "fontawesome-webfont.ttf" en mi servidor web e instalándolo como una fuente normal. No sé si forma parte de los prerrequisitos para usarlo de todos modos, pero funciona para yo ;-

Answer 4

No funciona, porque <i>&#xf015;</i> simplemente le pide al navegador que muestre el punto de código de uso privado U + F015 usando un tipo de letra cursiva. El código CSS Font Awesome no tiene nada que afecte esto. Si agrega class=icon-home a la etiqueta, obtendrá el glifo asignado a U + F015 en la fuente FontAwesome, pero lo obtendrá dos veces, debido a la forma en que funciona el truco Font Awesome.

Para obtener el glifo solo una vez, debe usar CSS que solicite el uso de la fuente FontAwesome sin activar las reglas que agregan un glifo a través del contenido generado. Un truco simple es usar un nombre de clase que comience con un icon- pero que no concuerde con ninguno de los nombres predefinidos en Font Awesome o cualquier otro nombre que se use en su código CSS o JavaScript. P.ej,

<i class=icon-foo>&#xf015;</i>

Alternativamente, use el código CSS que establece font-family: FontAwesome y font-style: normal en el elemento i .

PD. Tenga en cuenta que los puntos de código de uso privado como U + F015 tienen, por definición, ningún significado interoperable. En consecuencia, cuando las hojas de estilo están deshabilitadas,  no se mostrará como ningún carácter; el navegador usará su forma de comunicar la presencia de datos no definidos, como una pequeña caja, que posiblemente contenga el número del punto de código.

Answer 5

Para aquellos que puedan tropezar con esta publicación, necesitas establecer

font-family: FontAwesome;

como una propiedad en su selector CSS y luego unicode funcionará bien en CSS

Answer 6

Solo para agregar la respuesta de Jukka K. Korpela arriba, font awesome ya definió un selector de css "fa". Simplemente puede hacer <i class="fa">&#xf015;</i> . El truco aquí es, fa define el estilo de fuente: normal, si necesita cursiva, puede anular como <i class="fa" style="font-style:italic">&#xf015;</i>

Answer 7

También puede usar el icono FontAwesome con el pseudo selector CSS3 como se muestra a continuación.

Asegúrese de establecer font-family en FontAwesome como se muestra a continuación:

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

Para que todo lo anterior funcione, debe hacer lo siguiente:

1. Descarga la biblioteca FontAwesome css aquí FontAwesome v4.7.0
2. Extraiga del archivo zip e inclúyalo en la carpeta raíz de la aplicación, las dos carpetas como se muestra a continuación:
3. Haga referencia solo a la carpeta css en la sección <head></head> de su aplicación como se muestra a continuación: