{% INCLUDECSS '@cabot_footericons/footericons.css' %}
{% INCLUDECSS '@cabot_footericons/fontawesome/css/fa-brands.min.css' %}
{% for icon in fi_icons %}
<li class="fi-icon-item fi-item-{{ loop.index }}" style="--fi-color: {{ icon.FI_COLOR }}; --fi-color-hover: {{ icon.FI_COLOR_HOVER }}; --fi-bgcolor: {{ icon.FI_BGCOLOR }}; --fi-bgcolor-hover: {{ icon.FI_BGCOLOR_HOVER }};{% if icon.FI_SHADOW_COLOR %} --fi-shadow-color: 1px 1px {{ icon.FI_SHADOW_COLOR }};{% endif %}">
	<a class="fi-link fa-stack{% if icon.FI_BG eq 0 %} fi-nobg{% endif %}" href="{{ icon.FI_URL }}"{% if icon.FI_OPEN eq 1 %} target="_blank"{% endif %} title="{% if icon.FI_DESC %}{{ icon.FI_DESC }}{% else %}{{ icon.FI_NAME }}{% endif %}{% if icon.FI_OPEN eq 1 %} {{ lang('FI_OPEN_NEW') }}{% endif %}">
	{% if icon.FI_BG neq 0 %}
	<i class="fi-icon-bg fa {% if icon.FI_BG eq 1 %}fa-circle{% elseif icon.FI_BG eq 2 %}fa-square{% else %}fa-stop{% endif %} fa-stack-2x" aria-hidden="true"></i>
	{% endif %}
	<i class="fi-icon fa {{ icon.FI_CODE }} {% if icon.FI_BG neq 0 %}fa-stack-1x{% else %}fa-stack-2x{% endif %}" aria-hidden="true"></i>
	<span class="sr-only">{{ icon.FI_NAME }}{% if icon.FI_OPEN eq 1 %} {{ lang('FI_OPEN_NEW') }}{% endif %}</span>
	</a>
</li>
{% endfor %}