-
AuthorPosts
-
December 15, 2019 at 2:34 pm #1166080December 16, 2019 at 2:52 pm #1166409
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,
MikeDecember 17, 2019 at 3:07 pm #1166852Thank you for your reply.
When i upload the images from http://www.flaticon.com. There show:
I use the siteground web service. And they have open the zip function.
Php.ini list “extension = “zip.so””December 17, 2019 at 3:12 pm #1166855Hi,
Please include a link to your zip file so I can test on my localhost.Best regards,
MikeDecember 18, 2019 at 2:05 am #1167064Please download the file and test it. Thanks a lot.
December 18, 2019 at 1:44 pm #1167268Hi,
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,
MikeJanuary 12, 2022 at 9:09 pm #1335320Can I remove the icon, so there is not an icon?
January 13, 2022 at 1:49 am #1335326 -
AuthorPosts
- You must be logged in to reply to this topic.