Cómo utilizar font awesome
Los iconos se pueden utilizar en aquellos componentes de interfaz de usuario que tengan una propiedad de icono. Por ejemplo, el componente Button UI tiene esta propiedad en el primer nivel del objeto de configuración. Los iconos de los siguientes ejemplos de código se han tomado de la biblioteca de iconos incorporada.
Dado que los iconos de DevExtreme se suministran como una fuente de iconos, pueden personalizarse con las mismas propiedades CSS que se utilizarían para personalizar el contenido textual: color, tamaño de fuente, peso de fuente, alineación de texto, etc. Esto es válido para los iconos utilizados en componentes de interfaz de usuario…
dx-icon es una clase CSS que se añade a los elementos de icono cuando los componentes de interfaz de usuario de DevExtreme los representan en el DOM. No se puede utilizar otro nombre para ello. Sin embargo, no ocurre lo mismo con los iconos de otros elementos HTML. Puede utilizar cualquier nombre para la clase en este caso, como se demuestra en el ejemplo anterior.
La propiedad icono del componente UI acepta URLs, por lo que puede asignarle la URL de la imagen. Sin embargo, es mejor codificar la imagen en el tipo Base64 para reducir la cantidad de datos transferidos. Busque un conversor de imagen a Base64 en la web.
Añadir icono font awesome mediante css
Otra forma de encontrar el nombre de la fuente es hacer clic derecho sobre un icono de ejemplo de font awesome en tu página y obtener el nombre de la fuente (de la misma forma que se puede encontrar el código utf-8 del icono, pero ten en cuenta que puedes encontrarlo en :antes).
Por ejemplo: Quería adjuntar un icono de archivo adjunto después de todo el elemento a dentro de mi post. Por lo tanto, primero tengo que buscar si tal icono existe en fontawesome. Como en el caso que he encontrado aquí, es decir, fa fa-sujetapapeles. Entonces me gustaría hacer clic derecho en el icono de allí, y vaya a la ::before pseudo propiedad para obtener la etiqueta de contenido que está utilizando, que en mi caso me pareció ser \f0c6. Entonces me gustaría usar eso en mi css como este:
Fuente impresionante zeichentabelle
Es difícil imaginar las páginas web modernas sin estos diminutos pero útiles elementos: los iconos. Seguro que los encontrará en menús de navegación, datos de contacto, descripciones de productos, etc. Como parte integrante del diseño de interfaz de usuario, los iconos también pueden representar un reto para los desarrolladores.
Desde hace tiempo, existe un intenso debate sobre las fuentes de iconos frente a las fuentes SVG. A continuación, exploraremos qué son las fuentes de iconos y los iconos SVG, cómo puedes utilizarlos y qué método deberías preferir en determinadas situaciones.
En primer lugar, mencionamos la escalabilidad de las fuentes de iconos. De hecho, es posible cambiar el color de la fuente y añadirle una sombra, si es necesario. Sin embargo, recuerde que sólo puede aplicar un color a estos iconos. Ser monocromático y tener limitaciones de estilo es uno de los contras que los iconos de fuentes pueden presentar para los diseñadores/desarrolladores.
Otro problema que puede surgir con los iconos de fuentes es un destello de contenido sin estilo (FOUC). Para utilizar iconos de fuentes, hay que aplicar la regla @font-face, que indica a los navegadores que realicen una petición HTTP del archivo de fuentes.
Fuente impresionante font-face
Tengo Font Awesome 5 Pro instalado, así que puedo introducir glifos en línea según sea necesario al documentar su aparición en nuestro producto (ir al sitio de Font Awesome, buscar el glifo, copiar su valor Unicode, volver a Flare, Insertar carácter, seleccionar Font Awesome 5 Pro, pegar el Unicode en el cuadro de búsqueda y hacer clic en Buscar, seleccionar el glifo, hacer clic en Insertar, ¡guau! ), y aparecen bien tanto en HTML5 como en PDF (también tengo definiciones @font-face en mi CSS que hacen referencia a los archivos .ttf instalados).
Lo que quiero hacer es utilizar glifos FA similares a los archivos gráficos utilizados en esta entrada del blog, pero no estoy muy seguro de cómo codificar el CSS para hacer esto. ¿Algún experto en CSS por aquí que pueda guiarme sobre cómo tomar el CSS que hay y modificarlo para utilizar correctamente glifos FA en lugar de ambos tipos de salida?
Al menos cuando estoy probando los tipos de destino dentro de un tema, esto se muestra bien en HTML5, pero no en PDF> Nada en absoluto se muestra en la salida PDF, sólo, parece, un pequeño espacio donde algo debería ser representado. Tampoco se muestra en el editor XML.