---
description: Insérer une icône avec du texte
---

# Texte avec icône

## Disponible sur...

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3)

## Présentation

<details>

<summary><img src="https://img.shields.io/badge/internet-oui-green?style=for-the-badge&#x26;logo=typo3" alt=""></summary>

### Ajout d'un nouveau composant Texte avec icône

1. Sur la page en mode ![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSD1CZ72IMzn7bulXsE7C%2Fmode-rediger.png?alt=media\&token=f16ba40e-ee9d-4538-be59-993d8c842dae), trouvez la section où vous souhaitez ajouter un composant Texte avec icône.
2. Cliquez sur le bouton "+ Contenu" pour ouvrir le sélecteur d'éléments.
3. Sélectionnez **Texte avec icône** dans l'onglet **Texte & Médias**.

<img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FHlk5BScJuNUabKDtLZ26%2FCapture%20d%E2%80%99e%CC%81cran%202024-03-28%20a%CC%80%2010.16.15.png?alt=media&#x26;token=c8d96127-5607-4baa-8e57-3594189e470f" alt="" data-size="original">

### Configuration du composant

Dans l'onglet **Général**

1. Entrez le titre dans la zone **titre**
2. Entrez éventuellement un lien dans la zone **Lien**
3. Entrez votre texte dans la zone **Texte**

Dans l'onglet **Icône**

1. Choisissez le **Groupe d'icônes**
2. Selectionnez une **Icône** dans la liste

</details>

<details>

<summary><img src="https://img.shields.io/badge/satellites-oui-green?style=for-the-badge&#x26;logo=typo3" alt=""><img src="https://img.shields.io/badge/intranet-oui-green?style=for-the-badge&#x26;logo=typo3" alt=""></summary>

![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSqJbKZSvQ360NtdpCCsd%2FCapture%20d%E2%80%99e%CC%81cran%202024-03-28%20a%CC%80%2011.05.21.png?alt=media\&token=6235628b-9728-4219-bd78-7deb33180ca3)![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FPKaPkyJ1ruVRXQNPKdkE%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-04%20a%CC%80%2011.01.13.png?alt=media\&token=4273a6ac-560c-448f-8282-1022c9caf547)

### Ajout d'un nouveau composant Texte avec icône

1. Sur la page en mode ![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSD1CZ72IMzn7bulXsE7C%2Fmode-rediger.png?alt=media\&token=f16ba40e-ee9d-4538-be59-993d8c842dae), trouvez la section où vous souhaitez ajouter un composant Texte avec icône.
2. Cliquez sur le bouton "+ Contenu" pour ouvrir le sélecteur d'éléments.
3. Pour les sites ![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3) Sélectionnez **Texte avec une icône** disponible dans l'onglet **Contenus flexibles**. Pour les sites ![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3) Sélectionnez **Texte et icône** dans l'onglet **Contenus spéciaux**.&#x20;

![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2F0BfiYWM0S37A0nVEAIzs%2FCapture%20d%E2%80%99e%CC%81cran%202024-03-28%20a%CC%80%2010.40.12.png?alt=media\&token=a9c9824b-397d-497f-831d-63e49a5c9ee7)

### Configuration du composant

Dans l'onglet **Général**

1. Entrez le titre dans la zone **Titre**
2. Entrez éventuellement un lien dans la zone **Lien**
3. Dans la zone Icône choisissez : \
   \- La **Position** de l'icône\
   \- Son **Type** (rien, dans un cercle ou dans un carré).\
   \- Sa **Taille**\
   \- Les **Couleurs** de l'icône et du fond
4. Entrez le texte dans la zone **Texte**

![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSgROwwTkETOQoIVJzu1w%2FCapture%20d%E2%80%99e%CC%81cran%202024-03-28%20a%CC%80%2011.05.56.png?alt=media\&token=bcc5f6ef-568e-4587-b7e6-75116d3ae9e8)

</details>

## Exemples

Vous pouvez trouver des **exemples** d'utilisation du Contenu Texte avec icône :&#x20;

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)

{% embed url="https://template.univ-gustave-eiffel.fr/test-contenus/texte-avec-icone" %}

![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3)

{% embed url="https://modele3.univ-gustave-eiffel.fr/composants/texte-avec-une-icone" %}
