custom icons not showing

andreasconow · October 8

Hi,

after uploading my icomoon icon pack, the Bebuilder shows the pack but the icons are empty (as described in a previous discussion: https://forum.muffingroup.com/betheme/discussion/70396/custom-icons).

I saw and followed your video tutorial (https://muffingroup.com/betheme/features/custom-icons/) but the tutorial does not show the preference settings you chose when downloading the font from icomoon.

Could you please provide two exemplary screenshots

of the settings in the preferences tab in icomoon before downloading and
of the respective settings in the betheme>icons section when importing the icomoon.zip

to see what it should look like when both settings are aligned?

Thanks a lot

Phil · October 8

Hello,

Nothing special is selected in the Preferences tab, and default settings that are selected (the ones that appear after opening website first time). Also, there are no specific settings in Betheme.

Check out the following docs from Icomoon to see if your package is created correctly:

https://icomoon.io/docs#stroke-to-fill

https://icomoon.io/docs#importing

Best regards

andreasconow · October 8

Hi Phil,

thank you, I looked up the links, I think the icons should be fine since they are all one-path-one-layer icons with no strokes or text left.

Here is what I did:

Icomoon

created a new empty set named “studio”
imported the 11 custom icons to the set:

selected all icons
clicked on “generate font”
adapted the settings under “preferences” as follows:

downloaded the zip-file
renamed the zip-file from “icomoon-v1.0.zip” to “icomoon.zip"

Betheme

went to Betheme - Icons and clicked "Add New"
adapted the settings as follows:

clicked "publish"

Then, for just a few seconds, there is an (error?) message:

After this, the icons are uploaded and shown in the dashboard:

In Bebuilder, the icon set is shown, but the icons seem empty:

Do you have any idea what went wrong or do you need wp-credentials/ftp-access?

Best regards

Phil · October 9

Please send us the WordPress dashboard and FTP access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!

Please attach a link to this forum discussion.

Sending incorrect or incomplete data will result in a longer response time.

Therefore, please ensure that the data you send are complete and correct.

Thanks

andreasconow · October 9

ok, thanks, I'll set up a new wp-user-account for this purpose, which email address do you want me to use?

Phil · October 10

You can use any dummy email like [email protected]. It does not really matter.

Best regards

andreasconow · October 10

ok, thank you Phil,

I've sent you the wp and ftp login data through the contact form and left the imported icomoon.zip as it is,

you may find the svg files I used for creating the icomoon.zip under wp-content/uploads.

Thanks and best regards

Phil · October 10

Something is wrong with your SVGs.

I placed one to Figma and exported it from there. Then I imported this icon to icomoon, generated a package, and uploaded it and it works properly:

I uploaded the exported SVG to your media library so you can compare the differences.

It could be due to lack of height and width values set in SVG file.

Best regards

andreasconow · October 10

Ok thank you,

I tried and with the svg you uploaded I can create a functioning icomoon file, so it is not the font creation procedure in icomoon/betheme, but the svgs themselves.

When opening the svgs as such, I do not see any difference between them, same document size 48x48px, same icon size, same color, no border, no strokes, no text.

However, when i look at the xml data of the svgs exported from Affinity Designer and Adobe Illustrator, there really seems to be no specific indication of the height and width, it only says "100 %" for each.

Do you have any indication as to the best export settings in Affinity Designer or Adobe Illustrator or does icomoon recommend a totally different way of creating the svgs?

Best regards

Phil · October 11

I found the following links about that:

https://www.growfox.co.uk/blog/how-to-make-sure-your-svgs-have-height-and-width-attributes-using-illustrator-cc

https://graphicdesign.stackexchange.com/questions/154484/why-are-the-width-and-height-params-missing-from-svg-files-exported-from-adobe-i

Please see what they mentioned there and check if the icons work correctly then.

Best regards

andreasconow · October 11

Thanks for the links,

I tried this method with Adobe, Affinity and Inkscape leaving "activate viewbox" / "responsive" unchecked when saving / exporting, but none of them worked, the font was created, uploaded to the Betheme and the icon showed up on the dashboard, but when editing a page, it was still empty/grey. The xml files all showed a fixed height and width, so it seems this is not or at least not the only issue.

What eventually worked, was an older inkscape version: https://inkscape.org/release/0.92.3/platforms/, unortunately not very stable and crashing every so often, but it will get the job done I guess, so I'm happy for now.

In case you want to have a further look (as far as I can see, quite a few people are having problems with the icomoon upload and this affects also other themes and not only Betheme), I attach the xml-text of some files I tried today (I shortened the actual path to ..., if you need that too, let me know):

In any case thanks for your help and have a nice weekend!

Best regards

Phil · October 11

I am happy I could help. We will take a look at what you sent.

I think that it is worth mentioning that exporting SVGs from Figma also works correctly, and it is definitely a stable tool.

Best regards

andreasconow · October 14

ok thanks I'll look that up, too, for cleaning up the xml code of the final svgs I also found https://svgomg.net/, very neat and easy to use

custom icons not showing

Comments