I would upload an unspectacular iconfont. Here I have inverted numbers. Link

Then upload your coloured icons and make a note of the path for each icon.
now replace an icon of this font with the noted links of your coloured icons

this comes to your quick css:

.av_font_icon {
    overflow: visible !important;
}

[data-av_iconfont="solar-icons"]  {
  content: " ";
  background-size: 100px;    
  background-position: center center;
  background-repeat: no-repeat;
  border: none !important;
  color: transparent !important;
}

[data-av_iconfont="solar-icons"][data-av_icon="\e800"]{background-image: url(/wp-content/uploads/globe.gif) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e801"]{background-image: url(/wp-content/uploads/broken-spheres.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e802"]{background-image: url(/wp-content/uploads/bubbles.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e803"]{background-image: url(/wp-content/uploads/chrome-balls.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e804"]{background-image: url(/wp-content/uploads/film.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e805"]{background-image: url(/wp-content/uploads/glas-dots.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e806"]{background-image: url(/wp-content/uploads/glas-waben.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e807"]{background-image: url(/wp-content/uploads/green-world.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e808"]{background-image: url(/wp-content/uploads/home.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e809"]{background-image: url(/wp-content/uploads/hui.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e80a"]{background-image: url(/wp-content/uploads/lotus.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e80b"]{background-image: url(/wp-content/uploads/nachhaltig1.svg) !important}

Now – if you place your circled number 1 – you can see even in preview – the replaced colored icon:
And – yes even animated gifs can be inserted:

see replaced first icon : https://webers-testseite.de/abc/

PS: on that page with the snippets – you can see that i use the elements sizes for the icons – to generate the background-size :
https://enfold.webers-webdesign.de/colorized-font-icons/

if you like to use that too – remove from css code above the background-size line

function transfer_fontsize_to_backgroundsize(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($) {     
	$('.av-icon-char[data-av_iconfont="solar-icons"], .iconbox_icon[data-av_iconfont="solar-icons"]').each(function() {
		var iconLineHeight = parseInt($(this).css('line-height'));
		var iconPadding = parseInt($(this).css('padding'));
		$(this).css('background-size', (iconLineHeight + 2*(iconPadding))+'px');
	});
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'transfer_fontsize_to_backgroundsize');

and please think of since jQuery 3 the (window).load( is deprecated – it is now : (window).on('load',
( purely cosmetic – I personally prefer to write all jQuery as $ – and redeclare it by wrapping it in a jQuery function. )

function av_move_search(){
?>
<script type="text/javascript">
(function($){
	$(window).on('load', function(){
		$('#menu-item-search').detach().appendTo('#header_meta .sub_menu ul');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_move_search');

by the way: your cloudflare security blocks your website (on all of my browser – even on those where i do not run µBlock or private window only.

hyphens: auto will break words with a dash : Link
see on “can i use” the support for hyphens auto: https://caniuse.com/mdn-css_properties_hyphens_auto

you can use ismaels css in combination with hyphens

#main li {
   word-wrap: break-word;
   overflow-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}

No – I only “think” out loud.
As I understand it, only the order in which they are looped is different – how to solve this?

That was three years ago – but I think it works so far. Maybe I would do some things differently now.

Thanks – Mike – I forgot to mention that the coloured icons have to be uploaded to the media library

PS – you can drag&drop the colored icons to fontello – in most cases they will generate a monocolor version of it.

if you can download as svg – you can upload that to fontello.com
Using it as an iconfont it has to be not multicolored. the svg path’s had to be compound path.

Follow Mikes Link

And a little bit under Mike’s link there are the enfold fonticons used for their demos to download
https://kriesi.at/documentation/enfold/icon/#download-fontello-or-flaticon-icons-included-in-enfold-demos

ok – you have choosen a different testimonial layout:

try:

#top  .avia-testimonial-wrapper .avia-slideshow-arrows {
  display:  flex;
  position: relative !important;
  top: auto !important;
  bottom: 40px;
}

but you can use the enfold contact form – but with WP Mail SMTP
The free version is all you need. – It has many mailer options

You just need to find out from your provider which smtp server settings you need to use.

By the way: Incidentally, the spf-record is probably the most important thing here if, for example, the e-mail address used in your installation to send the contact form does not match the domain.

e.g:

SPF Include Example
For example: If you have “include:_spf.google.com” in your SPF record, and emails are sent from a Google IP address, it will be considered an authorized email sender because the originating IP is found within the “include” mechanism of that domain’s SPF record. As a result of this, the email will successfully pass through the server before reaching its intended recipient.
To authorize google as a verified sending source, this should be your SPF record syntax:
v=spf1 include:_spf.google.com ~all

that means : f.e. if your wordpress domain is your-wordpress-domain.com but you try to send your e-mails via contact form by (Email address hidden if logged out)
you had to go to your provider of your-wordpress-domain.com and set a txt record with including the url : your-name.com to authorized email sender.

Ask your provider what setting might be the best for your installation.
this differs from provider to provider. For example – on former times i had my domains on hosteurope.
so i had to set a txt record : v=spf1 a mx include:spf.server-he.de -all

etc.

No – please don’t.
I only come here occasionally and give my opinion on topics, but I have enough projects of my own at the moment – so I don’t want to take responsibility for other people’s projects.

for so few posts within a category, I would rather install a plugin that supports a custom post order to quickly find a solution. There you can customize the order of the posts by drag and drop.
Such a plugin would be, for example, Simple Custom Post Order

it is the structure of your titles – they formed with numbers ( your years ) there are options of natural sort order (SORT_NATURAL) etc.
the trouble is if you like to sort by titlel and titles are f.e. A1, A2, A10, B1, B20, B3 etc.
does a sort order could be A1, A10, A2, B1, B3, B20
i do not know if this has influence on that filter ?

Yes – if each post belongs to exactly one category, it should work. But what if the current post belongs to categories A and B – where should it be linked to then?
Multiple categorisation is not unusual.