Iconos del índice

Herramientas de IA

Puede asignar un icono a cualquier elemento del índice de su documentación, y los lectores lo verán junto a esa entrada en la barra lateral de navegación. Los iconos funcionan bien como puntos de referencia para las pocas entradas que los lectores buscan con más frecuencia, como una guía de inicio rápido, un registro de cambios o un enlace externo a su página de estado.

Añadir un icono

  • En el índice de la documentación, pase el cursor sobre la entrada y haga clic en el icono de menú situado junto a ella.

  • Seleccione Add Icon . Si la entrada ya tiene uno, la opción dice Change Icon.

  • Elija un icono y haga clic en Save.

Las páginas, las categorías, las etiquetas y los enlaces externos pueden llevar un icono. Los separadores no.

Quién puede establecer iconos

Establecer un icono está disponible para administradores y editores de publicación. Los redactores y revisores no ven la opción del menú.

Elegir un icono

El cuadro de diálogo ofrece dos fuentes, y una entrada usa una u otra. Elegir un icono del conjunto reemplaza una imagen cargada, y cargar una imagen reemplaza un icono elegido.

Font Awesome

Busque en el conjunto integrado en Choose an icon o explore la cuadrícula de resultados. Las pestañas de la parte superior alternan entre los estilos Solid, Regular y Brands.

DeveloperHub carga Font Awesome 7 Free, que incluye 2157 iconos repartidos en esos tres estilos. Los estilos Pro (Light, Thin, Duotone y Sharp) no están incluidos. Para explorar visualmente el mismo conjunto antes de buscar, use la búsqueda de Font Awesome con el filtro Free activado.

La búsqueda también entiende los nombres antiguos de Font Awesome 5, así que escribir times, cog o search sigue encontrando xmark, gear y magnifying-glass.

Cargar una imagen

Haga clic en Upload an image para usar su propio diseño, que es la forma de poner el logotipo de un producto o socio en el índice. Use un SVG o PNG cuadrado de al menos 32×32, ya que el icono se muestra a 15×15 junto al título de la entrada. Las imágenes cargadas conservan sus propios colores y nunca se tiñen.

Quitar un icono

Abra el icono de menú junto a la entrada, seleccione Change Icon, haga clic en Remove y después en Save.

Cómo afectan los iconos al índice

Los iconos están pensados para usarse con moderación, de modo que el índice siga siendo legible cuando solo unas pocas entradas tengan uno.

En cuanto una entrada tiene un icono, se reserva un espacio estrecho para él en todas las entradas de esa documentación, y los títulos quedan alineados en un mismo borde. Las entradas sin icono dejan el espacio vacío en lugar de mostrar un marcador de posición, lo que hace que destaquen los iconos que sí ha establecido. Las categorías reservan su espacio por separado, por lo que dar iconos a sus páginas no desplaza los encabezados de categoría.

Si quita el último icono de una documentación, el espacio desaparece y el índice vuelve a su diseño anterior.

Iconos en un repositorio sincronizado

En un proyecto sincronizado con GitHub, los iconos se definen en el _nav.yaml de la documentación, no en el frontmatter de las páginas. La clave icon se coloca junto a la clave propia de la entrada:

items: - introduction - page: authentication icon: key - page: parent icon: book-open items: - parent/child - category: Guides icon: 'https://assets.example.com/guides.svg' - label: Extras icon: tag - link: title: Status url: 'https://status.example.com' icon: heartbeat - separator

Escriba el valor con uno de estos formatos:

  • Solid: el nombre del icono solo, como rocket. No hay prefijo fas:; solid es el estilo predeterminado.

  • Regular: con el prefijo far:, como far:bell.

  • Brands: con el prefijo fab:, como fab:github.

  • Una imagen: la URL https:// completa de la imagen. No se aceptan rutas relativas ni URL relativas al protocolo.

Normalmente, una página aparece en _nav.yaml como una ruta simple, como - introduction. Solo se expande a la forma page: cuando lleva un icono, así que añadir esta función no reescribe la navegación de los repositorios que no usan iconos.

En una entrada de enlace, tenga en cuenta que icon es un elemento hermano de link, no uno de los campos que contiene.

Su repositorio es la fuente de verdad de los iconos, como lo es del resto de su navegación. Eliminar una línea icon quita el icono de esa entrada en la siguiente sincronización.

Los nombres de icono no se validan

Un nombre de icono que no existe en Font Awesome 7 Free, incluido un nombre exclusivo de Pro, se acepta igualmente. Se sincroniza sin ninguna advertencia y luego se muestra como un espacio vacío en el índice. Si un icono no aparece, compruebe primero el nombre en el conjunto Free.

Un valor que no es ni un nombre válido ni una URL de imagen, como una clase sin procesar como fas fa-key, lo notifica la sincronización y se ignora.

Escribir la navegación con un agente de IA

La Agent Skill organize-docs-repo incluye la lista completa de nombres de icono válidos, de modo que un agente que edite su _nav.yaml elija nombres reales en lugar de adivinar.

Los iconos establecidos en una página se conservan al duplicar la página o clonar la versión.

Iconos en línea dentro de una página

Para colocar un icono en el cuerpo de una página en lugar de en el índice, consulte Iconos.


  Última actualización