Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1166080

    Content Elements–Icon Grid–Grid Item Icon.
    I want to use the my own customerized icon as the image, Not the system default ones. How to do? Please help me to change it.


    Hey jack000486,
    The easiest way to do this is to add your icon to Enfold, you can see our documentation here.
    So if your icon is in the .svg format you can create the “fontello” zip file to import into our Iconfont Manager by going to and dragging it into the “custom icon” bar:
    If your icon is in .png format go to and convert it into .svg and then go to to create your icon pack.
    I recommend adding all of your icons to create one icon pack, that way they will be grouped together in the icon picker in Enfold.

    Best regards,


    Thank you for your reply.
    When i upload the images from There show:
    3-1 3-2
    I use the siteground web service. And they have open the zip function.
    Php.ini list “extension = “””


    Please include a link to your zip file so I can test on my localhost.

    Best regards,


    Please download the file and test it. Thanks a lot.


    Thank you, I see that the icons are in .svg format, so now you can upload them to to create your icon pack.
    You see changes them into a font file which is what the theme uses.
    But note that the result will be black and white icon fonts and looking at the .svg files you sent I see they are in color, so I’m thinking you would like to use colored icons, correct?

    In this case, we will change course and use css to add your color icons. So the first step is to convert your .svg into .png because WordPress doesn’t allow .svg uploads into the media library without a plugin.
    Then we will add this css in the General Styling > Quick CSS field:

    .avia-icon-grid-container li:nth-child(1) .avia-icongrid-icon {
    background-image: url(https://test.test/wp-content/uploads/2019/12/rocket.png);
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    .avia-icon-grid-container li:nth-child(1) .avia-icongrid-icon .icongrid-char:before { display: none; }

    This css targets the first icon in the Icon Grid element with the image in the url. So please change the url and change the number in li:nth-child(1) to the one you want to taget. This means that you will copy this code three times to change three icons.
    If you need so help targeting many of these please include a link to your page and we can help more.

    Best regards,


    Can I remove the icon, so there is not an icon?



    sorry I don’t understand, it sounds like you want to use an Icon Element without an icon, so please explain further what you would like to achieve.

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.