Icon Grid, Could i add a customerized icon?

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 fontello.com and dragging it into the “custom icon” bar:

If your icon is in .png format go to pngtosvg.com and convert it into .svg and then go to fontello.com 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,
Mike

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

Best regards,
Mike

Hi,
Thank you, I see that the icons are in .svg format, so now you can upload them to fontello.com to create your icon pack.
You see fontello.com 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,
Mike

Hi,

@CampComo 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,
Mike