Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1464194

    Could you please look at the screen shot attached and let me know how I can create this effect with an icon/image with the text next to it, and then another one next to that? Just like it show in the sample and want to make sure it looks good on mobile also.

    I tired 4 columns but it doesn’t work. And it needs to look just like the sample.

    Thanks!

    • This topic was modified 3 months, 1 week ago by bemodesign.
    #1464325

    Hey bemodesign,
    Thanks for your patience and the link to your screenshot, but it requires a login, please try a free screenshot service or disable the login requirement.

    Best regards,
    Mike

    #1464368

    attached

    #1464398

    Hi,
    I recommend using the icon box with the icon to the side of the content:
    Screen Shot 2024 08 11 at 7.40.31 AM
    then you can adjust with css.

    Best regards,
    Mike

    #1464657

    But what if I want to use my own icon or photo?

    #1464729

    Hi,
    You can use css to replace it, see this thread for examples

    Best regards,
    Mike

    #1464842

    Wow, that is incredibly confusing. Can believe there is not an easier option to get this effect. I even tried loading new icon .svg and got errors. Way too difficult for average person.

    #1464843

    What if I just want to add .svg icons?? I even tried to upload zip files and got errors. This is crazy.

    #1464853

    Hi,
    Sorry, you can not upload svg icons, the theme uses “icon fonts” which is a font file, not a icon image. Please see our documentation here. You may need to scroll down to Adding your own Fontello Icons Icon fonts can not have color.
    Perhaps when you clicked my link above it didn’t scroll correctly, try this link.
    It’s very simple, you can use css to replace the “icon font” with a svg image
    Screen Shot 2024 08 18 at 6.57.26 AM
    If you create a test page I can write a step-by-step example for you, similar to the screenshot above.

    Best regards,
    Mike

    #1464867

    Thanks, that would be great if you could do that. Here is a test page and I added some icon example to media if you need one.

    #1464916

    Hi,
    Thanks for the test page, so to have a different SVG icon for each item you need to use a different font-icon for each item so you can use a different code in the css for each item:
    Enfold Support 6461
    I then copied the base css from the example link and added your font-icon codes and your SVG icon URLs:

    [data-av_iconfont="entypo-fontello"][data-av_icon="\e89f"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/home-icon.png) !important}
    [data-av_iconfont="entypo-fontello"][data-av_icon="\e8a0"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/people-icon.png) !important}
    [data-av_iconfont="entypo-fontello"][data-av_icon="\e8a1"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/bed-icon.png) !important}
    [data-av_iconfont="entypo-fontello"][data-av_icon="\e8a2"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/bath-icon.png) !important}

    Then to make the gray backgrounds transparent I added this css:

    .page-id-321 .main_color .avia-icon-list .iconlist_icon {
        background-color: transparent;
    }

    This is the result:
    Enfold Support 6463

    Best regards,
    Mike

    #1465025

    Thanks!

    • This reply was modified 2 months, 4 weeks ago by bemodesign.
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Icon and text style, with 2 columns’ is closed to new replies.