<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="vd-social-icon" href="#"><span class="fas fa-envelope" aria-hidden="true"></span><span class="sr-only">Envoyer par courriel</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-twitter" aria-hidden="true"></span><span class="sr-only">Partager sur Twitter</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-facebook-f" aria-hidden="true"></span><span class="sr-only">Partager sur Facebook</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-linkedin-in" aria-hidden="true"></span><span class="sr-only">Partager sur Linkedin</span></a>
</li>
<li class="list-inline-item d-lg-none">
<a class="vd-social-icon" href="#"><span class="fab fa-whatsapp" aria-hidden="true"></span><span class="sr-only">Partager sur WhatsApp</span></a>
</li>
<li class="list-inline-item d-none d-lg-inline-block">
<a class="vd-social-icon" href="#"><span class="fas fa-print" aria-hidden="true"></span><span class="sr-only">Imprimer la page</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="vd-social-icon" href="#"><span class="fas fa-envelope" aria-hidden="true"></span><span class="sr-only">Envoyer par courriel</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-twitter" aria-hidden="true"></span><span class="sr-only">Partager sur Twitter</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-facebook-f" aria-hidden="true"></span><span class="sr-only">Partager sur Facebook</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-linkedin-in" aria-hidden="true"></span><span class="sr-only">Partager sur Linkedin</span></a>
</li>
<li class="list-inline-item d-lg-none">
<a class="vd-social-icon" href="#"><span class="fab fa-whatsapp" aria-hidden="true"></span><span class="sr-only">Partager sur WhatsApp</span></a>
</li>
<li class="list-inline-item d-none d-lg-inline-block">
<a class="vd-social-icon" href="#"><span class="fas fa-print" aria-hidden="true"></span><span class="sr-only">Imprimer la page</span></a>
</li>
</ul>
{
"title": "Partager la page",
"titleModifier": ""
}
@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;
}
}
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.