Bootstrap theme customization - Glyphicons

[sfeher]

Bootstrap -- great addition to AC and very glad to see it used. My attempt at customizations lead to some questions, though:

The Glyphicons that are used in the navigation (especially nice on mobile display/responsive sizing) are great.
There are a few that are referenced in the code, such as product finder, the phone for contact us, and logout. However, I want to add a few more to my navigation.

Looks like there's a couple of items to review:
1.) The bootstrap responsive style (see style.less) includes an import line:
@import "less/glyphicons.less";
Question: WHERE is that glyphicons.less file? I cannot see it anywhere in my installation.

2.) There's a copy of font files in the /App_Themes/Bootstrap_Responsive/fonts directory:
glyphicons-halfings-regular.eot, .svg, .ttf, .woff, and .woff2 versions.
Question: Has anyone tried to install these fonts locally? Is there any reference for these?

3.) "cheat sheets" with libraries of these available Glyphs seem to be available here: http://glyphicons.com/
Question: is this the accurate reference for the font files in #2 above?

When I attempt to update the code in style.less to use a different glyph, no dice.
For example, in style.less (starting around line 371), there's the following

Code: Select all

       .finder {
                    .glyphicon-search;
                }
                .contact {
                    .glyphicon-phone-alt;
                }
                .acct {
                    .glyphicon-user;
                }

Attempts to add new icons (for different menu items) fail:

Code: Select all

                 .users {
                    .glyphicon-group;
                }
                .products {
                    .glyphicon-cart-in;
                }

- how should we customize these .less files to update with appropriate new icons?
- is there a reference sheet (similar to http://glyphicons.com/) that we can use?

And finally -- if I'm using .less incorrectly, please feel free to correct me!

Thanks!

[mike92117]

Not using bootstrap myself but I am working on a responsive theme myself using foundation (which I prefer) which uses SASS, not LESS.

I don't see a glyphicons.less file in the bootstrap theme, however, you can definitely download it from getbootstrap.com and it is there along with all the others.

As for the webfonts, installing locally question, not sure I understand what you are asking. If you mean on your machine, you should be able to install the TTF font file. In terms of using them on your website, you just need to reference the CSS file (usually in style.SKIN) that has the webfont details (@font-face, font-family, urls of all the font files, such as ttf, eot, woff, svg).

[mazhar]

You can read about more icons available bootstrap from here http://getbootstrap.com/components/
In order to use an icon in html simply add i tag along with suitable class name of icon given above.

Code: Select all

<i class="glyphicon glyphicon-flag"></i>

We had some good discussion about configuring and customizing the theme using less here viewtopic.php?f=65&t=18329

[sfeher]

Thanks Mazhar,
I had found that earlier discussion thread re: Bootstrap, but that seemed clearly more oriented to layout/sizing issues and this was a little more specific.

The link to Bootstrap clearly indicates that only some of the original the Glyphicon Halfling set is "included". There are close to 250 icons and yet, the entire glyph library appears to be quite larger (600+) than the bootstrap library. Not all icons are included.... this isn't your fault, of course, but its helpful to realize that the library of icons available to the theme is not exhaustive of the entire Halfing set.

Thanks for your help!

Steve

[sfeher]

Marzhar ---

There's something that still not right on this.

If I follow your instructions above and simply add the code directly to the menu item in the header file

Code: Select all

<i class="glyphicon glyphicon-flag"></i>

Then the icon appears perfectly --- but the problem is that the icon ALSO appears in the full-screen display and I only want the icons on the small screen (mobile) display. Other icons on the default options are already working this way, because there's a class reference on the style.less page (Begins around line 370):

Code: Select all

                .acct {
	                    .glyphicon-user;
	                }
	                .login {
	                    .glyphicon-log-in;
	                }
	                .currency {
	                    .glyphicon-usd;
	                }

These icons referenced in the style.less page are only visible on the responsive small screen -- which is the behavior I want to mimic. If we add additional classes here in the style.less page and then update the header to use these newly defined classes in the HTML, these icons will not appear.
This makes me suspicious that the available library is, in fact, NOT the whole 250 characters that are defined on the Bootstrap site, but that are instead limited to only a few that have been brought into the AbleCommerce Bootstrap theme.

I'm trying to add these:

Code: Select all

              .customersRFG {
	                    .glyphicon-heart;
	                }
	                .productsRFG {
	                    .glyphicon-list-alt;
	                }
	                .servicesRFG {
	                    .glyphicon-cog;
	                }
	                .supportRFG { 
	                    .glyphicon-briefcase;
	                }
	                .quotesRFG { 
	                    .glyphicon-comment; 
	                } 

And they are not appearing on the mobile site at all.....
Any other recommendations?