Foehn Design System

Social Icons 

<h2 class="vd-heading-light h4 mb-3">Partager la page</h2>
<ul class="list-inline vd-social-icons">
    <li class="list-inline-item">
        <a class="mastodon-link vd-social-icon" href="#" title="Lien vers le profil Mastodon">
            <span aria-hidden="true" class="fa-brands fa-mastodon"></span>
            <span class="visually-hidden">Lien vers le profil Mastodon</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="bluesky-link vd-social-icon" href="#" title="Lien vers le profil Bluesky">
            <span aria-hidden="true" class="fa-bluesky fa-brands"></span>
            <span class="visually-hidden">Lien vers le profil Bluesky</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="instagram-link vd-social-icon" href="#" title="Lien vers le profil Instagram">
            <span aria-hidden="true" class="fa-brands fa-instagram"></span>
            <span class="visually-hidden">Lien vers le profil Instagram</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="linkedin-link vd-social-icon" href="#" title="Lien vers le profil Linkedin">
            <span aria-hidden="true" class="fa-brands fa-linkedin"></span>
            <span class="visually-hidden">Lien vers le profil Linkedin</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="facebook-link vd-social-icon" href="#" title="Lien vers le profil Facebook">
            <span aria-hidden="true" class="fa-brands fa-facebook"></span>
            <span class="visually-hidden">Lien vers le profil Facebook</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="twitter-link vd-social-icon" href="#" title="Lien vers le profil Twitter">
            <span aria-hidden="true" class="fa-brands fa-x-twitter"></span>
            <span class="visually-hidden">Lien vers le profil Twitter</span>
        </a>
    </li>
    <li class="d-lg-none list-inline-item">
        <a class="whatsapp-link vd-social-icon" href="#" title="Partager par WhatsApp">
            <span aria-hidden="true" class="fa-brands fa-whatsapp"></span>
            <span class="visually-hidden">Partager par WhatsApp</span>
        </a>
    </li>
</ul>
 
<h2 class="vd-heading-light h4 mb-3{% if titleModifier %} {{ titleModifier }}{% endif %}">{{ title }}</h2>
<ul class="list-inline vd-social-icons{% if styleModifier %} {{ styleModifier }}{% endif %}">
    <li class="list-inline-item">
        <a class="mastodon-link vd-social-icon" href="#" title="Lien vers le profil Mastodon">
            <span aria-hidden="true" class="fa-brands fa-mastodon"></span>
            <span class="visually-hidden">Lien vers le profil Mastodon</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="bluesky-link vd-social-icon" href="#" title="Lien vers le profil Bluesky">
            <span aria-hidden="true" class="fa-bluesky fa-brands"></span>
            <span class="visually-hidden">Lien vers le profil Bluesky</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="instagram-link vd-social-icon" href="#" title="Lien vers le profil Instagram">
            <span aria-hidden="true" class="fa-brands fa-instagram"></span>
            <span class="visually-hidden">Lien vers le profil Instagram</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="linkedin-link vd-social-icon" href="#" title="Lien vers le profil Linkedin">
            <span aria-hidden="true" class="fa-brands fa-linkedin"></span>
            <span class="visually-hidden">Lien vers le profil Linkedin</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="facebook-link vd-social-icon" href="#" title="Lien vers le profil Facebook">
            <span aria-hidden="true" class="fa-brands fa-facebook"></span>
            <span class="visually-hidden">Lien vers le profil Facebook</span>
        </a>
    </li>
    <li class="list-inline-item">
        <a class="twitter-link vd-social-icon" href="#" title="Lien vers le profil Twitter">
            <span aria-hidden="true" class="fa-brands fa-x-twitter"></span>
            <span class="visually-hidden">Lien vers le profil Twitter</span>
        </a>
    </li>
    <li class="d-lg-none list-inline-item">
        <a class="whatsapp-link vd-social-icon" href="#" title="Partager par WhatsApp">
            <span aria-hidden="true" class="fa-brands fa-whatsapp"></span>
            <span class="visually-hidden">Partager par WhatsApp</span>
        </a>
    </li>
</ul>
 
{
  "title": "Partager la page",
  "titleModifier": ""
}
  • Content: 
    @charset 'UTF-8';

.vd-social-icons {
  margin-bottom: 0;

  @media print {
    display: none;
  }
}

.vd-social-icon {
  display: inline-block;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: $black;
  border-radius: 100%;
  color: $white;
  text-align: center;
  text-decoration: none;

  &:visited {
    color: $white !important;
  }

  &:hover,
  &:focus {
    background: $link-hover-color;
    text-decoration: none;
    color: $white;
  }
}
  • URL: /components/raw/social-icons/_social-icons.scss
  • Filesystem Path: src/components/02-molecules/social-icons/_social-icons.scss
  • Size: 519 Bytes

You can use all the Fontawesome icons in these icons.

Add .float-xs-right to the print icon to have it float to the right.