Custom (Local) icon collections

Love the webicons (Glyphicons, Awesome Font, etc.), but would also like to have my own collections of icons available. For example, add a UI to select a folder on the file system, give it a name. Opening this collection would then show all icons available in the folder (like browsing the Glyphicons). I'd love to have FamFamFam Silk collection (for example) available to me inside Bootstrap Studio.


And yes, I know the BSS "icons" are really webfonts and what I'm talking about are actually images. Still would be nice to have user-defined folder(s) of images available to pick from.

You can pretty much accomplish that by adding a folder to your images section and name it for your icons. Now you can import all those icons into it. When you need them they are browsable as the app shows you image thumbnails within image folders so you can choose what you want. Don't think there's a need to add anything further than that for browsing images.

I would however love to be able to add additional Webfont setups, or additional packages than those already included. Some people actually paid for the upgrade packages of the glyphicons and it would be great to have the ability to browse those as well.

Hi Jo,

Thanks for the tip! Your suggestion is superb, with one small caveat - if I add a folder and dump a bunch of images in it, all of them will be published whether I actually use them or not. Not a huge issue as we're talking very small file sizes. I'll proceed this way, per your suggestion as it's still handier than browsing the file system.

I also think you idea about customized Webfonts is excellent and agree that this would be a great feature.


Imagery should still be published on your export whether it's used or not if I'm not mistaken

You're quite welcome,

Another tip is that after you export the site, just remove that folder from the assets folder and that way you don't have to upload the icon folder at all. Export yes, but upload isn't necessary. Am hoping that one of these updates will give us the ability to set files and folders as whether we need or want them to export or not, as well as some other settings. That would help for situations like this so that we can have things handy in the app, but not need to export them and upload them etc.

@Chris, yes it exports all images you have imported. That is the part that I'd like to have some control over. The ability to import whatever images and such that you want without having to publish those that aren't used. Would actually be nice if the app would 'only' publish the images that have been added to pages. Dunno how something like that would be done though, but would be awesome feature if it was possible. :)

Why not just delete the unwanted images from your design before export as part of a housekeeping excercise.

I agree that an option to only export selected would be a nice to have.

My reason is that I do use BSS as my main designer/editor. Yes I use outside editors to check things out and test things, but once I have what I want and I know it works as it should then I add it to my projects in BSS. Because of this, many of the sites I create will always be ongoing and will use a lot of the images that I import during various times throughout the year. Many do specific ads on their sites for special events that happen yearly, monthly, etc. and they get put on the site and then removed, and the images will be used again, just not all the time. Senseless to keep taking them out and putting them back in for me.

So that would be my reason why it's not practical to remove the images before exporting. For someone that does the editing of the sites outside of BSS upon a final export it would make sense, but I'm going to guess that I will not be the only one using it BSS as their primary design/editor software.

There is another reason that the exporting of "only images used" would be helpful. Once you've gone beyond 10 or so pages, it's not always easy to know exactly what images are being used and which are not, other than from memory and going through every page to check. Without a type of indicator it would be pretty time consuming to go through every page for people that have dozens of pages. So having it export only what is used would be perfect. Another option may be to somehow have BSS mark (recolor, or I don't know what lol) images that are in use so we can more easily delete those not used and that won't be used.

+1 for adding custom web font folders. I bought the Font Awesome Pro collection and would like to have access to that within BSS.

So just to clarify, currently you cannot add custom icon fonts?

Not at this time no. Not sure if they plan to add this or not, haven't heard anything so far about it.

Thanks for the clarification Jo.

I am new to BS, so probably not all the tricks are near me. I use BS to make final products, pure HTML5, CSS, JS objects as uploadable objects. So in my use case, it is important that the final product be as clean as possible. Exporting unused images is not a good work practice. Removing manually every single image not used is time-consuming, adding custom fonts/icons are very important, adding a folder with images to choose from is great, including a mechanism to treat a folder as an icon store would be great, as long as it only exports used images. I am happy with results so far as I do very simple things. But heavy lifting may be hard with this tool due to small things like these. In a large or complex site o in continuous small changes (my case), it is not very promising.

Images are actually pretty easy to manage if you give it some thought. Here's what I do:

  1. Create folders for whatever images I will want to use (I create these as I need them, not all at the start).
  2. Create an image holding folder where all my "possible" images will go so that I can upload them all the time, test them etc.
  3. Move the image that "will" be used, to another folder that I create for it.

At the end, when I export my site, I can just delete the Image Holding folder and wallah! No images are now in my project that I don't need or am not using. Pretty simple when you think about it.

I agree on the icons, I am also waiting on them, but give them a bit of time, they are working very hard to implement Bootstrap 4 now which will give us so much more versatility. If that feature isn't there then, I'm sure it's something that's on their plate as they do know a lot of users are waiting on the icon ability. Until then, there is quite a bit of them already installed in the program. It's not like there aren't "any" icons you can use, there are quite a few from various different packages.

Other than that, this app is the most powerful and completest app to use Bootstrap with that I have found anywhere so far. there are a good handful of decent apps with similar setups, but none of them are as editable or complete as BSS. It's a work in progress and probably always will be, that's the beauty of it. Ask for things and most of the time they are added at some point. I think right now the Bootstrap 4 is taking precedence over everything else though.

Use the Images tool I gave you, that will help a lot in that area, even if they never implement a way to only export images used, this is a perfect alternative so far for me and only adds a few more seconds to the export as well as a second or 2 to delete unused images.

Good Luck!

@Jo sorry for the bump. This thread is pretty old, but the most recent I found regarding adding custom icon fonts to the project.

First things first, I like the dev team went ahead and added the option to exclude un-used images on export, so it's worth mentioning that this is not an issue anymore to any future reader. Good job, dear devs.

However, I cannot find a solution to adding my own custom icon font. I'd love to be able to browse my Glyphicon Pro icon set. I'd also love to add more free icons like Google Material icons to it.

Is it really still not possible to do?