Imported Custom Icon Pack Disappearing

Hey Mossalot,

At the bottom of the custom icon pack upload page, there is a URL where the icon pack resides.

Are you able to see the icon pack files (wp-svg-custom-pack.zip, wp-svg-custom-pack.json, fonts, demo.html and style.css) in that directory?

If you are able to see the icons originally when you upload them, but leave and come back and they are gone, that makes me believe the demo.html file or the fonts folder is being deleted after you direct away from the page (which is strange behavior).

I’d like to try and see if the files are still in the required location.

Also, if you right click and view your browser console are you getting any 404 errors or JS errors?

Thanks,
Evan

I deleted my .zip files containing my icons on the server and it seems to be working normally now. However, my multisite sites still will not import a zip file. I checked the server and the only two files in the directory are demo.html and style.css. Do you know know if this plugin is compatible with multisite?

Here’s a video of the site not importing the .zip
https://db.tt/uU27uBjo

Hey Mossalot,

The URL at the bottom of the plugin does not seem correct for a multi-site set up. It may have a few issues on a multi-site set up, as the upload paths are set up differently.

When on the icon import page the upload directory is set to /wp-content/uploads/wp-svg-icons/custom-pack

but on a multi site set up the directory differs a bit in it falls under a seperate directory. The plugin looks to enqueue the css and js files out of /wp-content/uploads/wp-svg-icons/custom-pack, but on multi site your upload directory is different so its not finding any files.

I will have to adjust the code to accommodate multi-site setups.

I dont currently have any multi site networks set up so it will be hard for me to test. I will push out an update when I get around to this adjustment.

Thanks,
Evan

I am seeing the same issue. I import a custom set, and it looks fine. However, if I click off the WP SVG Icons section and then back to the Import Custom Icon Pack, the icons are still there, but the images are rectangles vs the actual icon.

Any resolution on this?

I haven’t worked out the Multi-site path issue as of yet

It’s not a multi-path issue on my end, I don’t think. I’m not sure what you mean by “multi-path”, but I am only hosting a single site.

Is there something else?

Smitty, start up your own thread and I’ll get around to helping you.

First, confirm that your host has allow_url_fopen set to 1.

You can check this inside of your php.ini file. If you need help locating that file or am not sure what I’m even talking about, do a quick google search.

There are tons of articles out on the web.

Also, check the URL at the bottom of the upload page and double check that a .ZIP file exists in that directory.

Thanks,
Evan

Great plugin. I have:

1. purchased the icomoon ultimate font pack and uploaded it successfully to the wordpress plugin
2. I can see all of the 2027 fonts when I click on “import custom icon pack”.
3 (the problem). when I click on a font and get the code (example: <div class=”icon-home5 custom-pack-icon”></div>) and insert that code into my wordpress site the icon doesn’t appear.

Note: I am putting the <div class=”icon-home5 custom-pack-icon”></div> code in the text vs. the visual editor and the /wp-content/uploads/wp-svg-icons/custom-pack folder has all of the files that you’ve mentioned above.

What am I doing wrong?

Thank you.

Hi stacksurfers,

Is the stylesheet loading properly on the front end of the site? Can you show me an example of the code you are using to try and display an icon? And can you provide a link to the site you’re having trouble with. Thanks.

Evan

Thanks for the fast response Evan.

My site is in a sandbox for testing purposes and is password/htaccess protected until I’m ready to go-live.

I called my icon pack “stacksurfers” and, upon loading to the plugin, the resulting server files in the custom-pack/font folder are:

stacksurfers.eot
stacksurfers.svg
stacksurfers.ttf
stacksurfers.woff

The code I’ve used to display a custom font is:

<div class=”icon-home5 custom-pack-icon”></div>

When I display the page the font doesn’t appear. When I inspect the element I get the following errors and warnings for the live page:

Failed to load resource: the server responded with a status of 404 (Not Found) https://the7test.stacksurfers.com/wp-content/uploads/wp-svg-icons/custom-pack/fonts/icomoon.woff?-19lczs
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Failed to load resource: the server responded with a status of 404 (Not Found) https://the7test.stacksurfers.com/wp-content/uploads/wp-svg-icons/custom-pack/fonts/icomoon.ttf?-19lczs

Failed to load resource: the server responded with a status of 404 (Not Found) https://the7test.stacksurfers.com/wp-content/uploads/wp-svg-icons/custom-pack/fonts/icomoon.svg?-19lczs#icomoon

The plugin is looking for files that don’t exist instead of stacksurfers.eot, stacksurfers.svg, stacksurfers.ttf or stacksurfers.woff.

Hey stacksurfers,

It looks like there was an issue renaming the file. If I remember correctly, the plugin is meant to extract the font files, and the style.css associated with the fonts, and rename them to

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

If you can, located the font file directory, which should be /wp-content/uploads/wp-svg-icons/custom-pack/fonts and then rename each font file to icomoon.eot, icomoon.svg etc.

It looks like the font files aren’t being loaded because they are not named appropriately.

Let me know if that helps resolve the issue at all!

Thanks,
Evan

Hey stacksurfers,

It looks like there was an issue renaming the file. If I remember correctly, the plugin is meant to extract the font files, and the style.css associated with the fonts, and rename them to

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

If you can, located the font file directory, which should be /wp-content/uploads/wp-svg-icons/custom-pack/fonts and then rename each font file to icomoon.eot, icomoon.svg etc.

It looks like the font files aren’t being loaded because they are not named appropriately.

Let me know if that helps resolve the issue at all!

Thanks,
Evan

Hey stacksurfers,

It looks like there was an issue renaming the file. If I remember correctly, the plugin is meant to extract the font files, and the style.css associated with the fonts, and rename them to

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

If you can, located the font file directory, which should be /wp-content/uploads/wp-svg-icons/custom-pack/fonts and then rename each font file to icomoon.eot, icomoon.svg etc.

It looks like the font files aren’t being loaded because they are not named appropriately.

Let me know if that helps resolve the issue at all!

Thanks,
Evan

Hey stacksurfers,

It looks like there was an issue renaming the file. If I remember correctly, the plugin is meant to extract the font files, and the style.css associated with the fonts, and rename them to

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

If you can, located the font file directory, which should be /wp-content/uploads/wp-svg-icons/custom-pack/fonts and then rename each font file to icomoon.eot, icomoon.svg etc.

It looks like the font files aren’t being loaded because they are not named appropriately.

Let me know if that helps resolve the issue at all!

Thanks,
Evan

Hey stacksurfers,

It looks like there was an issue renaming the file. If I remember correctly, the plugin is meant to extract the font files, and the style.css associated with the fonts, and rename them to

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

If you can, located the font file directory, which should be /wp-content/uploads/wp-svg-icons/custom-pack/fonts and then rename each font file to icomoon.eot, icomoon.svg etc.

It looks like the font files aren’t being loaded because they are not named appropriately.

Let me know if that helps resolve the issue at all!

Thanks,
Evan