Thanks man!
I selected and downloaded some custom icons from fontello and flaticon. Then I uploaded them from mentioned button “Upload/select fontello font zip”.
Then when I open IconBox, On the Icon list shows the title of fontello and flaticon but those icons are not my custom icons. I have tried 5 times with diffrent icons but the result didn’t changed.

What is the problem with this item?

This is my custom css file

	/* Set charset */
	@charset 'UTF-8';
	
	html {
  		background: #d50080 !important;
	}
	
	#header {
    position: relative;
    z-index: 501; /*(issues/769)*/
    width: 100%;
    background: transparent;
	}
	
	#header_main {
		width: 100%;
		margin: 0px;
		border-bottom-style: solid;
    	border-bottom-width: 1px;
    	z-index: 1;
	}
	
	.main_menu ul:first-child > li > a{
		font-size: 16px;

	}
	
	.avia_desktop #advanced_menu_toggle:hover, .avia_desktop #advanced_menu_hide:hover {
    	background-color: #d50080;
		color: #ffffff;
    	border-color: #d50080;
    }
		
	.header_main_wrapper {
		max-width: 100%;
		margin: 0px auto;
		background: rgba(0,0,0,0.6);
	}

	
	/* **************************************** */

	#top .av_header_glassy.av_header_transparency #header_main {
    	background-color: rgba(0, 0, 0, 0.6) !important;
    }
    
    #advanced_menu_toggle, #advanced_menu_hide {
    	background-color: #000000;
    	color: #ffffff;
    	border-color: #000000;
	}
	
	/* **************************************** */
	
	
	div#header_main.container_wrap.container_wrap_logo {
		background: transparent !important;
	}
	
	
	.html_header_top #top .av_header_stretch .container {
    	width: 96%;
   	 	padding: 0;
   	 	max-width: 1400px !important;
	}
	
	.header_color .primary-background, .header_color .primary-background a,
	 div .header_color .button, .header_color #submit, .header_color input[type='submit'],
	.header_color .small-preview:hover, .header_color .avia-menu-fx,
	.header_color .avia-menu-fx .avia-arrow, .header_color.iconbox_top .iconbox_icon,
	.header_color .iconbox_top a.iconbox_icon:hover, .header_color .avia-data-table th.avia-highlight-col,
	.header_color .avia-color-theme-color, .header_color .avia-color-theme-color:hover,
	.header_color .image-overlay .image-overlay-inside:before, .header_color .comment-count,
	.header_color .av_dropcap2, #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text,
	.header_color .av-colored-style .av-countdown-cell-inner, .responsive #top .header_color .av-open-submenu.av-subnav-menu > li > a:hover,
	#top .header_color .av-open-submenu.av-subnav-menu li > ul a:hover {
    	background-color: #d50080;
    	color: #ffffff;
    	border-color: #b30060;
	}
	
	::selection {
    	background-color: #d50080; !important
    	color: #ffffff; !important
	}
	
	/* **************************************** */
	
	
	#menu-item-search {
		display: none;
	}
	
	#clients_slider {
    height: 120px;
    margin: 0px;
    padding: 0px
	
	#scroll-top-link{
    background-color: #d50080;
	}
	
	#scroll-top-link{
    color: #eeeeee;
    border: 1px solid #000000;
	}
	
	#socket .copyright {
    float: right; !important
	}
	
	
	#socket {
    font-size: 11px;
    margin-top: -1px;
    z-index: 1;
    background: #d50080 !important;
    color: #eeeeee;
	}

• This reply was modified 9 years, 5 months ago by insanityNL. Reason: missed a space in the code

as you see you only need a class or an id for that rotating trick!

if you want f.e. that the icons in an icon-box (big icon at top) rotate once on hovering give the iconbox a class ( in my case: rotating_icon)

(if you want that every iconbox react like this forget about custom css and make it for .iconbox_icon:hover )

.rotating_icon .iconbox_icon:hover{
animation-name: iconrotate;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: iconrotate;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: iconrotate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-play-state: running;
-webkit-backface-visibility: visible
}
@keyframes iconrotate
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
 
@-moz-keyframes iconrotate /* Firefox */
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
 
@-webkit-keyframes iconrotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

• This reply was modified 9 years, 6 months ago by Guenni007.

Waiting for your feedback so I resolved

.your-custom-class .iconbox_icon {
    display: none;
}
.your-custom-class .iconbox_content_title{
text-align: center;    
}
.your-custom-class .iconbox_content_container  {
text-align: center;    
}

Is correct?

• This reply was modified 9 years, 6 months ago by gobbo_79.

Hello … I’ve made your changes and are operative for both the plug-in proposed by Basilis and is editing the CSS by Yigit. Now I should set the center text but I can not.

.your-custom-class .iconbox_icon {
    display: none;
    text-align : center;
}

I tried to put this but does not work. Someone tells me how I can fix it?

• This reply was modified 9 years, 6 months ago by gobbo_79.

Also, I applied the css code below to change the “Register Now” button to a blue color. Did I do this correct? or will this effect other fullwidth submenu’s on the site? Again I’m only trying to edit the colors/style of custom css class ewts17-submenu

#top #wrap_all .header_color .primary-background, .header_color .primary-background a, div .header_color .button, .header_color #submit, .header_color input[type='submit'], .header_color .small-preview:hover, .header_color .avia-menu-fx, .header_color .avia-menu-fx .avia-arrow, .header_color.iconbox_top .iconbox_icon, .header_color .iconbox_top a.iconbox_icon:hover, .header_color .avia-data-table th.avia-highlight-col, .header_color .avia-color-theme-color, .header_color .avia-color-theme-color:hover, .header_color .image-overlay .image-overlay-inside:before, .header_color .comment-count, .header_color .av_dropcap2, #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text, .header_color .av-colored-style .av-countdown-cell-inner, .responsive #top .header_color .av-open-submenu.av-subnav-menu > li > a:hover, #top .header_color .av-open-submenu.av-subnav-menu li > ul a:hover {
    background-color: #066eb5;
    color: #ffffff;
    border-color: #066eb5;
}

• This reply was modified 9 years, 6 months ago by brainxchange.

Hi Yigit,
I have named it individualreise
@media only screen and (max-width: 767px) {
.individualreise {
width: 100% ! important;
margin-left: 0 !important; }
}
The iconboxs still display next to each other on mobile verson 768px. Could you please check it?

Regarding my question about toggle id on the url. I have added this following code to my enfold child but nothing happens. Could you please take a look too?

add_theme_support(‘avia_template_builder_custom_tab_toogle_id’);