Icônes réseaux sociaux

Disponible sur...

Présentation

Ce module permet d'ajouter dans le footer de votre site des icones de réseaux sociaux avec les liens associés.

Utilisation

Ajoutez, sur la page d'accueil, dans la zone Pied de page : gauche, un élément Pur HTML puis collez le code suivant :

<div class="footer-sociallinks">
	<div class="sociallinks">
		<a class="sociallinks-link" href="https://www.facebook.com/UniversiteGustaveEiffel/" rel="noopener" target="_blank" title="Facebook">
			<i class="fab fa-facebook"></i>
		</a>
		<a class="sociallinks-link" href="https://twitter.com/UGustaveEiffel" rel="noopener" target="_blank" title="Twitter">
			<i class="fab fa-twitter"></i>
		</a>
		<a class="sociallinks-link" href="https://www.instagram.com/universitegustaveeiffel/" rel="noopener" target="_blank" title="Instagram">
			<i class="fab fa-instagram"></i>
		</a>
		<a class="sociallinks-link" href="https://www.linkedin.com/company/universit%C3%A9-gustave-eiffel/" rel="noopener" target="_blank" title="LinkedIn">
			<i class="fab fa-linkedin"></i>
		</a>
		<a class="sociallinks-link" href="https://www.youtube.com/channel/UCNMF04xs6lEAeFZ8TO6s2dw" rel="noopener" target="_blank" title="YouTube">
			<i class="fab fa-youtube"></i>
		</a>
	</div>
</div>

Vous pouvez ensuite modifier le HTML pour enlever les icônes qui ne vous intéressent pas et modifier les URL.

Les icônes seront présents dans le footer de toutes vos pages.

Ajoutez, sur la page d'accueil, dans la zone Pied de page : gauche, un élément Pur HTML puis collez le code suivant :

<div id="social-media-icons">
  
  <li><a class="social-media-icon facebook" href="https://www.facebook.com/UniversiteGustaveEiffel/" target="_blank" title="Facebook">
      <div class="ir">
        <svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
          <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
        </svg>
      </div></a></li>

<li><a class="social-media-icon twitter" href="https://twitter.com/UGustaveEiffel" target="_blank" title="Twitter">
      <div class="ir">
        <svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
          <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"></path>
        </svg>
      </div></a></li>

<li><a class="social-media-icon linkedin" href="https://www.linkedin.com/company/universit%C3%A9-gustave-eiffel/" target="_blank" title="LinkedIn">
      <div class="ir">
        <svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
          <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path>
        </svg>
      </div></a></li>

<li><a class="social-media-icon instagram" href="https://www.instagram.com/universitegustaveeiffel/" target="_blank" title="Instagram">
      <div class="ir">
        <svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
          <path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
          <path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
          <circle cx="351.5" cy="160.5" r="21.5"></circle>
        </svg>
      </div></a></li>

<li><a class="social-media-icon youtube" href="https://www.youtube.com/channel/UCNMF04xs6lEAeFZ8TO6s2dw" target="_blank" title="YouTube" >
	    <div class="ir">
	      <svg viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
	        <path d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"/>
	      </svg>
    </div></a></li>

</div>

Vous pouvez ensuite modifier le HTML pour enlever les icônes qui ne vous intéressent pas et modifier les URL.

Les icônes seront présents dans le footer de toutes vos pages.

Si vous n'êtes pas à l'aise avec le HTML nous pouvons vous aider sur https://eiffelcom.slack.com #aide-typo3