SOLVED: Icon Box multiple issues

Hello,

I’m new to bricks builder, but very excited to grow along side of it.

I’m attempting to build my first website with it, and am struggling with the “Icon Box” widget. Herein lies both my question and my issue.

Sorry for my url typos, limits of the forum system…

First my questions:

  1. Is there a way to determine which version(s) of the icon fonts are being used? I noticed on the Ionicons website there are new icons that are not available in the icon select box.
  2. Is there a way to upgrade the font sets, to utilize the updated icons?
  3. And if there is a way to upgrade the font sets, will the interface also update itself?

Second my issues:

Using the “Icon Box” widget, I am utilizing the built in SVG feature, I have uploaded some SVGs I exported from Affinity Designer, except none of the size controls are working for me to control the size of my SVG. I suspect that has something to do with my export.

Second I have downloaded some SVGs from svgrepo . com. These SVGs do allow the SVG sizing and color controls to operate as they are supposed to however the images do not appear in the Editor or Preview interfaces, however, they do appear in the front end of the site, after I save my edits and view the page.

The issue, and 2nd SVG icon in use, is the same as in this forum post: Extend icon library

Another issue I am having is when I am using my svgs, that I have exported from Affinity Designer, even though I am selecting a different SVG in each widget box, it is displaying what ever is in the first box, across all of the widget boxes…

Bricks Version: 1.3.6
Browser: Safari 15.2
OS: macOS
URL: staging2.rightsyntax.com

[Please describe in as much detail as possible how we can replicate this bug]

Hi Rich,

Welcome to the forum!
To answer questions one to three shortly: no :smiley:

A little more detailed: we do not update the icon, font, and other libraries as soon as a new version is released, but in irregular intervals. The next update is planned for Bricks 1.3.8.

Can you please provide 2-3 of your SVGs for me to look at and test?

Best regards,
timmse

Timmse,

Thank you for your response to my questions, the only one I’d like to get a little more information on, is there a way to determine which version of the icons fonts are currently in use?

Thank you also for looking into my issues with the SVG, I will be attaching some of my SVGs as well as the one used in the forum post I listed above. I will also provide some screenshots to help show what I am seeing…

SVGs:
http://staging2.rightsyntax.com/wp-content/uploads/2022/01/Right-Syntax-Project-Planning.svg
http://staging2.rightsyntax.com/wp-content/uploads/2022/01/Right-Syntax-Consultation.svg

Screenshots:
Editor:
PastedGraphic-3.png

Hi,

Unfortunately not, because the version number (comments in general) is stripped out in the minified CSS. It should be version 4.4.3 at the moment ( :see_no_evil:).

Thanks for the SVGs, I’ll take a look soon. Can you please try uploading the screenshots again? Something went wrong, obviously :laughing:

Btw., there’s something wrong with your SVGs, as they are more rasterized images, than SVGs. I don’t know affinity designer, its export capabilities, and how you’ve created them, but that is definitely not right :smiley:

This is how they look in the browser:

Hey Rich,
with Bricks 1.4 we’ve updated almost every library to the latest version, if possible.

With Ionicons, it’s a bit problematic: Ionicons doesn’t provide icon font files since v5, and the SVG names are different from the class names in 4.4.3 (the version we are using). So we won’t be able to update Iconicons, without breaking sites using Ionicons. Therefore we do without it. However, you can upload the icons you are missing as SVG and use them that way.

Best regards,
timmse

As per @RisynOne user, the last problem that he faced and mentioned

Another issue I am having is when I am using my svgs, that I have exported from Affinity Designer, even though I am selecting a different SVG in each widget box, it is displaying what ever is in the first box, across all of the widget boxes

Seems still persists
I tried to use SVG as Icon element and also as SVG element. No matter using whichever element we use. If we use any SVG for the first time, it displays the same SVG across for all other elements inside blocks.
Even though it shows the other SVG in the editor pane (left side), it do Not reflect the correct one in the right side of editor or builder.
Sometimes, it don’t even shows the preview as well, when we use any other SVG after already uploading first SVG in the icon or SVG element.

I tried using correct SVG also (from SVG repo.com) and also after exporting from Affinity designer.

It looks like there is a Bug or some glitch

@timmse (admin) can you please try to replicate at your end and help to resolve the issue.

Regards

Hi Harshil,
Welcome to the forum!

Without a link/SVGs I can only guess, but I’m pretty sure it’s because of your SVGs. I guess that the SVGs all use inline styles and/or reference the same ID.

Accordingly, the same is displayed for each SVG. Please open the SVGs with a text/code editor and see if the IDs are identical. If so, change them accordingly so that they are unique.

As the IDs are assigned during export from your vector program, we cannot change anything, as we are neither responsible for the export nor provide the SVGs.

Similar reports, same reason:

Hello @timmse

Thank you for your swift response.
Yes, I can see that the ID was same in both the SVG files.
Although I update one of them, and it works like a Charm.
Thanks for detailed response and suggestion on how to update or edit the file, in Notepad.

However, there is one thing to note, that there were 2 places, where it mentioned the ID. (If require, I can post or upload the SVG or screenshot showing the same. Let me know please)

Do I need to change at both places or just one. And do you have any idea, as why the ID is at two places in SVG file. While in actual SVG file (not exported through vector software), but from svgrepo or any other one, then there is No such ID, or ID only at once.

Regards