<ul class="vd-list-icons">
<li>
<span class="fa fa-info-circle" aria-hidden="true"></span> <a href="#">info.spi@vd.ch</a>
</li>
<li>
<span class="fa fa-map-marker" aria-hidden="true"></span> <a href="#">voir sur la carte</a>
</li>
</ul>
<ul class="vd-list-icons">
{% for item in listIcon.items %}
<li>
<span class="fa {{ item.icon }}" aria-hidden="true"></span> {% if item.accessibleLegend %}<span class="sr-only">{{ item.accessibleLegend }}</span>{% endif %}<a href="{{ item.url }}">{{ item.item }}</a>
</li>
{% endfor %}
{% if listIcon.button %}
<li class="mt-3">
<a
href="#"
class="btn btn-dark"
{% if listIcon.button.title %} title="{{ listIcon.button.title }}">
{{ listIcon.button.text }}
{% endif %}
</a>
</li>
{% endif %}
</ul>
{
"listIcon": {
"items": [
{
"item": "info.spi@vd.ch",
"icon": "fa-info-circle",
"url": "#"
},
{
"item": "voir sur la carte",
"icon": "fa-map-marker",
"url": "#"
}
]
}
}
@charset 'UTF-8';
@use "sass:math";
.vd-list-icons {
@include list-unstyled;
.fa {
width: 1em;
margin-right: (math.div($spacer, 2));
text-align: center;
}
li {
margin-bottom: 0;
}
}
Add the .vd-list-icons class to a list to set icons as bullets.
Add an icon from FontAwesome before the list-item: <span class="fa fa-info-circle" aria-hidden="true"></span>