Issue #2481💬 RespondidoAbierto el 30 de diciembre de 2019por andrewryan1906Reacciones 1

No se puede usar Font Awesome Icons dentro del lienzo

Respuesta rápidapor andrewryan19061

De hecho, descubrí el problema a mitad de escribir la publicación, pero decidí terminarla y dejarlo aquí por si alguien se encontraba con esto. Los estilos usados para paneles, bloques, etc. no se aplican a los estilos dentro del lienzo, ya que el lienzo está en un marco en I. El problema era que no había instalado el...

Lee la respuesta completa abajo ↓

Pregunta

Para empezar, gran trabajo en un proyecto increíble. No puedo creer que esto exista.

Vale, he pasado los últimos días revisando la documentación y ahora estoy empezando a construir mis propios componentes. Sin embargo; para el diseño de plantillas, quiero que mis componentes se rendericen de forma diferente. Veo que puedo interceptar el renderizado y cambiar eso.

Pero estoy intentando renderizar esto:

<div class="templateComponent"> <i class="fa fa-utensils-alt"></i></i> Menú Avanzado</div>

Y por alguna razón, este icono de Font Awesome NO se renderiza (Font Awesome). Este mismo icono funciona bien al renderizar bloques así:

  Atributos: {clase: 'FAS FA-Utensilios-Alt FA-2X'},

Entonces descubrí que ningún icono de Font Awesome se renderiza dentro del lienzo. ¿Por qué?

Respuestas (1)

andrewryan190630 de diciembre de 2019

De hecho, descubrí el problema a mitad de escribir la publicación, pero decidí terminarla y dejarlo aquí por si alguien se encontraba con esto.

Los estilos usados para paneles, bloques, etc. no se aplican a los estilos dentro del lienzo, ya que el lienzo está en un marco en I. El problema era que no había instalado el CSS de Font Awesome dentro del lienzo (pero sí en mi aplicación externa, por eso funcionaba para bloques).

Puedes hacer esto en el init:

 grapesjs.init({
  .. Otros stuf
    lienzo: {
          cualquier hoja de estilo aquí se importa y se usa SOLO para el lienzo
            Estilos: [
              "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            ]
   },
 
y cualquier cosa dentro del baseCSS se incluye en una <styles> etiqueta dentro del lienzo, 
 Permitiéndote especificar estilos en línea
  baseCss: 'estilos CSS aleatorios'
}

Además, si quieres cambiar la apariencia de los objetos dentro del lienzo, puedes incluir estilos en línea usando la propiedad baseCSS.

Gracias, Andrew

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.