If you need an Image hard code such as a social media icon, but only want to display when a certain link field is filled out.... Here's your twig code.
My link field is field.hudl.url replace it with your link field.
The twig:
<div id="social">
{% if content.field_hudl_link is not empty %}
<img src="https://sandyardbeachacademy.com/sites/default/files/default_images/Hudl...">
<a class="hudl_link" href="{{ content.field_hudl_url.0['#url'] }}">
{% endif %}
</div>
The css:
#social {
position: relative;
}
a.hudl_link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
That's it. :)