Iconos y Emojis

Emojis

La extensión Emoji permite, como su nombre indica, añadir emojis como un carácter más del texto. Cada emoji se escribe indicando su nombre entre caracteres ":". Por ejemplo:

Vámonos de fiesta :tada:

Muestra:

Vámonos de fiesta

Activarlo via mkdocs.yml:

markdown_extensions:
  - pymdownx.emoji

Algunos ejemplos:

markdown	resultado
:woman:
:police_officer:
:alarm_clock:
:dog:
:cake:

Tradicionalmente, se usa la biblioteca de EmojiOne, pero por motivos de licencias, se recomienda cambiar a otras bibliotecas, por ejemplo twemoji. Esto se establece en el archivo de configuración mkdocs.yml:

markdown_extensions:
  - pymdownx.emoji:
        emoji_index: !!python/name:material.extensions.emoji.twemoji 

¿Como podemos averiguar el nombre de la etiqueta correspondiente a cada emoji? La documentación de Material for MkDocs tiene una función de buscador de etiquetas que nos puede resultar de utilidad. Introducir los términos de búsqueda en inglés.

En el archivo de configuración mkdocs.yml podemos añadir la opción emoji_generator, que establece como se va a generar el emoji:

markdown_extensions:
  - pymdownx.emoji
        emoji_index: !!python/name:material.extensions.emoji.twemoji 
        emoji_generator: !!python/name:material.extensions.emoji.to_svg

Iconos

De forma similar a los emojis, podemos hacer referencia a los iconos suministrados por Material for MkDocs/icons. Hay varias colecciones:

• Material Design
• FontAwesome
• Octicons
• Simple Icons

Cada icono es un archivo de imagen, tomado del repositorio. Para hacer referencia al icono, hacer referencia a la ruta del archivo, sustituyendo el carácter / por un guión:

:fontawesome-regular-face-laugh-wink:

toma el archivo:

material/templates/.icons/fontawesome/regular/face-laugh-wink.svg

y muestra:

Una vez más, podemos usar la función de [búsqueda de etiquetas] en la documentación de Material for MkDocs.

Aplicando estilo a los iconos

Supongamos que tenemos el siguiente icono:

¡Felicidades !

Si activamos la extensión attr_list:

markdown_extensions:
  - attr_list
  - pymdownx.emoji

podemos asignar propiedades de estilo al icono:

¡Felicidades :fontawesome-regular-face-laugh-wink:{: style="color:red;" } !

lo que muestra:

¡Felicidades !