Icon List

Overview

IconList is closely related to the Icon Box element and it can consist of any number of Icon List. Users can easily add the icons bundled with the theme or upload custom icons and add them.
Examples of Iconlist

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode 

[av_iconlist position='left' iconlist_styling='' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-6e53ca'] [av_iconlist_item title='List Title 1' icon='43' content='Enter content here' av_uid='av-69s43u'] [av_iconlist_item title='List Title 2' icon='25' content='Enter content here' av_uid='av-62hxu2'] [av_iconlist_item title='List Title 3' icon='64' content='Enter content here' av_uid='av-5u3d36'] [/av_iconlist]

Customization

Font ( Title / Content / Link )

Title, Content and Link color for the default Big List is fully customizable from the IconList options.
Font family is inherited from the fonts set up in the theme options. For any advanced customisation, you can always use the below CSS snippet.

Code Snippet:

/*-----------------------------------------------
// CSS - IconList Fonts Title / Content / Link
//----------------------------------------------*/

/* IconList Title */
#top .avia-icon-list h4.iconlist_title {
background: #222;
color: #ffc20e!important;
padding: 5px 10px;
}

/* IconList Content */
#top .avia-icon-list .iconlist_content p {
color: #3369e7;
}

/* IconList Link */
#top .avia-icon-list h4.iconlist_title a {
color: #fff;
display: block;
}

Icon

The Icon, Icon color and Icon background color can be customizable from the IconList options. However, if you like to add advanced styles please use the below CSS.

Code Snippet:

/*----------------------------
// CSS - IconList Icon
//----------------------------*/

/* Icon color */
#top .avia-icon-list .iconlist_icon .iconlist-char:before {
color:#ed1c24;
}
/* Background */
#top .avia-icon-list .iconlist_icon {
background: #002663!important;
}
/* IconList Timeline */
#top .avia-icon-list .iconlist-timeline {
border-color: #ed1c24;
}

Center align icon list

To center align the icon list please use the below CSS

Code Snippet:

.avia-icon-list li {
text-align: center;
}

.avia-icon-list li .iconlist_icon,
.avia-icon-list li .article-icon-entry {
float: none;
display: inline-block;
vertical-align: middle;
}

Remove Icon List Timeline

To remove the timeline that extends from one icon to the other in the icon list please use the below CSS

Code Snippet:

/* Remove Icon List Timeline */
#top .avia-icon-list .iconlist-timeline {
border: none!important;
}

Remove Animation

To remove the default animation from the IconList please use the below CSS code.

Code Snippet:

/*------------------------------------
// CSS - IconList remove animation
//------------------------------------*/

#top .avia-icon-list *{
opacity: 100!important;
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

Spacing between icon list.

To add more space between each of the minimal small list as shown in the below example please use the CSS provided below:

  • List Title 1
  • List Title 2
  • List Title 3
  • List Title 4
  • List Title 5

Code Snippet:

 /*------------------------------------
// CSS - IconList space
//------------------------------------*/

#top .av-iconlist-small li {
margin: 10px 0;
}

Responsive behavior 2 columns in mobile.

To display the IconList side by side in 2 columns on a portable device. Add the IconList inside the Grid Row element.
In the GridRow element options select the mobile behaviour as “Cells appear beside each other, just like large screen”. To further accommodate the two IconList side by side in small screens please use the below CSS.

Code Snippet:

/*------------------------------------
// CSS - IconList in portable device
//------------------------------------*/

@media only screen and (max-width: 767px) {
#top .avia-icon-list-container {
margin-top: 75px;
}
#top .avia-icon-list .iconlist_icon {
position: absolute;
top: -65px;
}
#top .avia-icon-list.avia-icon-list-left .iconlist_icon {
left: 0;
}
#top .avia-icon-list.avia-icon-list-right .iconlist_icon {
right: 0;
}
#top .avia-icon-list li {
margin: 0 0 65px 0;
}
/* IconList Timeline */
#top .avia-icon-list .iconlist-timeline {
border-color: transparent;
}
}

Resource

Contributed video:
Icon List Element Tutorial