Hexagon Shape in Iconbox

Result Page: https://webers-testseite.de/pureinstall/hexagones/

I gave to the icon-box itself a custom-class: hexagone-icons

The trick is to place a div ( div.icon-container) between the before and after container – and to tranfer from the icon-box to that new container a lot of enfold settings. You can now set different colors on the icon-box as before – the will be transfered to the hexagone borders. Even a different icon-set is possible.

this comes to child-theme functions.php :

function add_icon_box_container(){
?>
<script type="text/javascript">
(function($) {
	$('.iconbox.iconbox_top.hexagone-icons .iconbox_icon').each(function(){
		var DataIcon 		= $(this).data('av_icon'),
			DataFont		= $(this).data('av_iconfont'),
			IconColor		= $(this).css('color'),
			IconBgColor 	= $(this).css('background-color'),
			IconBorder 		= $(this).css('border');
		$(this).append('<div class="icon-container"></div>'); 
		$(this).css('color', IconBgColor);
		$(this).find('.icon-container').attr({
			'data-av_icon': DataIcon,
			'data-av_iconfont': DataFont,
		}).css({
			'background-color': IconBgColor,
			'color': IconColor,
		});
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_icon_box_container');

this to quick css

.hexagone-icons .iconbox_icon{
  width: 100px;
  height: 57.735px;
  background: currentColor;
  position: absolute;
  left: 45% !important;
  border: 1px solid currentColor
}
.hexagone-icons .iconbox_icon::before {
  content: "";
  position: absolute;
  top: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 28.8675px solid currentColor;
}
.hexagone-icons .iconbox_icon::after {
  content: "";
  position: absolute;
  bottom: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 28.8675px solid currentColor;
}

.hexagone-icons .iconbox_icon {border-radius: 0px !important; height: 30px !important; width: 68px !important;}
  
.hexagone-icons .iconbox_content_title {margin-top: 50px !important;}    

.hexagone-icons .icon-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.hexagone-icons .icon-container:before {
    color: currentColor;
    content: attr(data-av_icon);
    font-size: 40px;
}

You had to adopt the dimensions of some things! Are there formulars on