Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 16, 2023 at 8:13 pm #1416427
    stephaniebLOS

    Hi, I’m trying to make a Horizontal Icons List applying the steps in this thread. https://kriesi.at/support/topic/horizontal-icons-list/
    I have added the code and classes but things are off. Code is below.

    1. I would like the icons centered.
    2. I need the icons to be larger Double the size
    3. I would like the icon to have a hover color

    .horizontalicons ul.avia-icon-list li {
    float: left;
    clear: none;
}
.horizontalicons .iconlist-char {
    font-size: 14px;
}
.horizontalicons .iconlist-timeline { 
display: none;
}

.horizontalicons .iconlist_icon { 
    margin-right: 10px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}
    August 18, 2023 at 1:51 pm #1416547
    Mike

    Hey stephaniebLOS,
    In your footer I see this:
    Enfold_Support_2970.jpeg
    Try changing ypur iconlist_icon line-height to 20px like this:

    .horizontalicons .iconlist_icon {
    margin-right: 10px;
    height: 30px;
    width: 30px;
    line-height: 20px;
}

    and the center icons will be centered:
    Enfold_Support_2972.jpeg
    To center the icons in the footer try adding this css:

    .horizontalicons {
	display: flex;
	justify-content: center;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 21, 2023 at 8:35 pm #1416791
    stephaniebLOS

    Thank you for this. I added the code but things are still off on my end.

    Additionally – How do I make the icons larger? and how do I add a hover background color on the circle?

    August 22, 2023 at 12:42 am #1416807
    Mike

    Hi,
    To make them larger and add a color on hover try this css:

    .horizontalicons .iconlist_icon {
width: 48px!important; 
height: 48px!important; 
line-height: 48px!important; 
min-height: 48px!important; 
font-size: 15px;
}

#top .avia-icon-list-container.horizontalicons li:first-child .iconlist_icon:hover {
	color:#fff; background-color:#37589b; 
}
#top .avia-icon-list-container.horizontalicons li:nth-child(2) .iconlist_icon:hover {
	color:#fff; background-color:#a67658; 
}
#top .avia-icon-list-container.horizontalicons li:nth-child(3) .iconlist_icon:hover {
	color:#fff; background-color:#419cca; 
}
#top .avia-icon-list-container.horizontalicons li:nth-child(4) .iconlist_icon:hover {
	color:#fff; background-color:#9fae37; 
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.
    Enfold_Support_3013.jpeg

    Best regards,
    Mike

    August 22, 2023 at 5:50 pm #1416873
    stephaniebLOS

    Thank you Mike, works great.

    August 22, 2023 at 6:07 pm #1416878
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Horizontal Icons List’ is closed to new replies.