Hello Enfold support,
We just updated one of our staging sites with Enfold 4.3 to test it out. We noticed a couple things that “changed” after the update. Regarding the icons we used the solution you have above i.e. using images as icons within the icon boxes. Specifically they disappeared! We did set the “Performance” to delete all old CSS but when looking in our custom CSS, the code was still there. Any idea why our ALB set up to place images in the iconboxes is now not working? Custom CSS and links to changes in private for you to review.
Thanks,
Eric

• This reply was modified 7 years, 10 months ago by Eric.

don’t forget the css in quick css:

#top #button-on-top  .avia-button-fullwidth {
    padding: 20px 0px;
}
#button-on-top .avia_iconbox_title {
    font-size: 20px !important;
}

and :

add_action('ava_main_header', function() {
if(wp_is_mobile()){
  echo '<div id="button-on-top">';
  echo do_shortcode("[av_button_big label='100% Donation Policy' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]");
  echo '</div>';
}
});

you see the label= that is the text in the button
you see that in the code are custom_bg color and color_hover (hex-codes) so you can change yourself.

and if this fits for you – it makes no sense that you have on mobile this donate menu button:

.avia_mobile #menu-item-668 {
    display: none;
}

maybe – best will be to give a custom class to all these iconboxes (your account, services, operations, co-op …)
i have set the selectivity for now via page id and color-section id

.page-id-76 #after_section_1 .iconbox {
    display: inline-flex;
}

.page-id-76 #after_section_1 .iconbox .entry-content-header {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

on smaller screens set back to display: block or do insert to the headings some soft-hyphens with &shy and ;
sorry board soft will immediatly change the entitie code even if placed in code so &shy with semicolon behind

But on your site i can not see that – on the image hoster – yes :lol
but as i said – on your page i does not see that effect.

1) By the way – you forgot to set one custom class to the second row left (or is it intentionally)
2) By the way – you know that interesting page for SIMULATED DAYLIGHT PDT WITH INDOORLUX

Icon is font-size ( it is hard to simulate it because there are minifying tools on your page)
try please:

#top .iconbox_left_content .iconbox_icon.hexagones, 
#top .iconbox_right_content .iconbox_icon.hexagones {
    font-size: 42px;
    line-height: 70px;
}

• This reply was modified 8 years ago by Guenni007.

well to get hexagone icons in enfold is not difficult to reach.

here you can get some of the clip-path : https://bennettfeely.com/clippy/

what is to do.

1) give the icon-box or icon-list a meaningful custom class (here it is hexagones)

2) this comes to quick css (yes without the ending e):

.hexagon {
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

3) this comes to functions.php of your child-theme:

function add_class_to_icon() {
?>
<script type="text/javascript">
	  jQuery('.hexagones .iconbox_icon').css( 'border-radius' , '0px' );
          jQuery('.hexagones .iconbox_icon').addClass('hexagon');
	  jQuery('.hexagones .iconlist_icon').css( 'border-radius' , '0px' );
	  jQuery('.hexagones .iconlist_icon').addClass('hexagon');
 </script>
<?php
}
add_action('wp_footer', 'add_class_to_icon');

the clip-path must go to the icon itself. So we had to add the hexagon class to it via addClass

Results: https://webers-testseite.de/hexagons/
The demo https://kriesi.at/themes/enfold-medical/ seems to fit well for you

First i edited again links are the same as above.
I added the option to set the link target !

1) on which version of enfold you are with your install ?
2) what is behind that custom-class (iconboxstyle) ? (css code please)

maybe it is better to have only on those iconboxes a pointer which has a link
so add a class with this code to iconboxes which includes an anchor in it and only give the css to those new class.

add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
    $('.iconbox').has('a').addClass('withlink');
	function a() {
			$('.iconbox.withlink').on('click', function(e) {
					var link = $(this).find('a').attr('href');
					window.location.href = link;
			});
	}
	a();
})(jQuery);
</script>
<?php
}

.iconbox.withlink {
    cursor: pointer;
}

please do erase all the rest you tried till now:

.su-list ul li {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: table !important;
}

maybe you play a bit with left positioning

BUT ! now you have to say if you only wanted to have it more specific. Because it goes to all su-lists
maybe you set a custom css on that fields where you like to have it
f.e. if you only want to have it on iconboxes:

.iconbox .su-list ul li {
    position: relative;
    left: 47%;
    transform: translateX(-50%);
    display: table !important;
}