Where Are Bootstrap Glyphicons Stored?

Key Takeaways:

Bootstrap Glyphicons are stored in the ../fonts/ directory relative to compiled CSS files
The Glyphicons Halflings set has over 250 glyphs available for Bootstrap free of cost
Glyphicons CSS rules are in bootstrap.css and bootstrap-min.css within Bootstrap’s css folder
A link back to Glyphicons is needed when using them
The full list of Glyphicons is defined in bootstrap_bootstrap.scss

Introduction

Glyphicons are icon fonts that are commonly used in web development to add simple vector graphics to a project. The Bootstrap framework includes its own set of Glyphicon icons which are open source and free to use. But where exactly are these Bootstrap Glyphicons stored within the framework’s directory structure? This comprehensive article will analyze where developers can find Bootstrap’s Glyphicons files, how they are implemented, and how to properly use them in Bootstrap projects.

Understanding where Glyphicons are located and how to access them is essential knowledge for any developer working with Bootstrap. This article will provide a deep dive into how Bootstrap stores and serves Glyphicons, empowering developers to fully leverage these icons in their projects. Read on to learn all about where Bootstrap Glyphicons are stored!

Where Are The Glyphicons Files Located?

The Glyphicons icon fonts included in Bootstrap are stored in the ../fonts/ directory relative to the compiled Bootstrap CSS files.

Specifically, there is a glyphicons-halflings-regular.eot, .svg, .ttf, and .woff file containing the full Glyphicons set in this fonts folder. These are the font files that contain the actual Glyphicons icons that get displayed on the page.

Without these font files being available, the Glyphicons would not get loaded and rendered properly. This is why the ../fonts/ folder containing the Glyphicons files needs to be accessible relative to the location of your compiled Bootstrap CSS.

Typically, the compiled Bootstrap CSS files are located in a /css folder within Bootstrap’s /dist folder. So the ../fonts path points one level up to access the fonts folder at the same level as /dist.

What Is The Glyphicons Halflings Set?

The Glyphicons icon fonts included with Bootstrap are officially named “Glyphicons Halflings”.

This Glyphicons Halflings set contains over 250 individual icons that cover a wide range of common interface elements, objects, and actions. Bootstrap has incorporated these high-quality icons and made them available for free use in Bootstrap projects and applications.

Some examples of icons included in the Glyphicons Halflings set are:

Interface icons like search, print, settings, dashboard
Directional icons like left, right, up, down
File type icons like pdf, csv, jpg, zip
Various transport icons like plane, train, bike, car
Common object icons like heart, star, clock, phone

Having this vast selection of icons available out of the box is useful for quickly adding simple, scalable graphics to any Bootstrap project.

The Glyphicons Halflings icon set is normally only available for purchase and commercial use. However, the creator has made these 250+ icons free to use specifically within Bootstrap. This is a great benefit of using Bootstrap for development.

Where Are The Glyphicons CSS Rules?

In addition to the font files, Bootstrap also needs the associated CSS rules to render the Glyphicons icons properly on the page.

These CSS rules are contained within the main Bootstrap CSS files themselves, namely bootstrap.css and bootstrap-min.css located in the /css folder within Bootstrap’s /dist directory.

Deep within these CSS files, there is a section dedicated to defining various CSS classes that correspond to each Glyphicon available in the icon font.

For example, rules like:

css

Copy code

.glyphicon-search:before { content: "\e003"; } .glyphicon-heart:before { content: "\e005"; }

This maps each unique Glyphicon in the font to a specific CSS class like .glyphicon-search or .glyphicon-heart.

That way, Bootstrap is able to render the correct icon by applying the right CSS class to an element on the page. The magic happens in the content: "\e003"; part which inserts the icon from the font!

So the Glyphicons CSS rules need to be included along with the font files for the icons to work properly in Bootstrap.

Properly Using Glyphicons In Projects

When leveraging Bootstrap’s Glyphicons in your own projects, there are a couple items to keep in mind:

1. Include Credits – The creator of Glyphicons Halflings requires a link back to Glyphicons whenever possible. This can typically be added to the footer of your site.

2. Access Font Files – Your project needs to be able to access the Glyphicons fonts folder relative to the compiled CSS files. This may require some directory restructuring.

3. Reference Bootstrap CSS – Make sure you are correctly linking to the necessary Bootstrap CSS that contains the Glyphicons CSS rules. Usually bootstrap.css or bootstrap-min.css.

Following these best practices ensures everything is in place for successfully using Glyphicons in your project. Then you can start adding  tags with Glyphicon classes like  to easily insert icons!

Full List of Glyphicons Defined

For reference, the full list of Glyphicons available in the Halflings set is defined within Bootstrap’s source SCSS files, specifically _variables.scss and _glyphicons.scss.

This includes each Glyphicon name along with the CSS class and Unicode character code needed to render that particular icon from the font files.

For example, referencing _glyphicons.scss shows the definition for the search icon:

scss

Copy code

.glyphicon-search { &:before { content: "\e003"; } }

And the heart icon:

scss

Copy code

.glyphicon-heart { &:before { content: "\e005"; } }

This makes it easy to lookup exactly which icon names and CSS classes are available when using Glyphicons in your project.

The complete list is contained within Bootstrap’s source code, specifically in the files _variables.scss and _glyphicons.scss located at /scss/_bootstrap in the Bootstrap source on GitHub.

Conclusion

In summary, the Bootstrap Glyphicons icon font files are stored in the ../fonts/ directory relative to the compiled Bootstrap CSS files. These provide over 250 icons in the Glyphicons Halflings set for free use in Bootstrap. The icon CSS rules get included in Bootstrap’s core CSS files like bootstrap.css and any project using Glyphicons needs to ensure the fonts are accessible and credits given. With these best practices in mind, developers can fully leverage Glyphicons to easily add icons and graphics to their Bootstrap projects!

Frequently Asked Questions About Bootstrap Glyphicons

Here are some common questions about Bootstrap’s Glyphicons:

How do I enable Glyphicons in my Bootstrap project?

To enable Glyphicons, first make sure you are linking to Bootstrap’s CSS which contains the Glyphicon CSS rules. Then ensure the /fonts/ folder containing the Glyphicons files is accessible from your page CSS. Finally, add  tags with Glyphicon classes like  in your HTML.

What size are the Glyphicons icons?

The base size of Glyphicons icons matches the current font size. So by default they are 16px x 16px, but scale larger or smaller based on font sizing set via CSS or parent elements. Glyphicons look best at 16px or multiples of 16px.

How can I change the color of Glyphicons?

Use CSS to target the .glyphicon class or specific icon classes like .glyphicon-search and set the color property. For example:

css

Copy code

.glyphicon-search { color: #3366cc; }

This will make just the search icon blue.

Are Glyphicons compatible with all browsers?

Glyphicons work across all modern browsers including Chrome, Firefox, Safari, Edge, and IE10+. Support is limited on IE9 and below due to lack of icon font support. SVG fallbacks can be added to improve old browser compatibility if needed.

Can I use Glyphicons in commercial projects?

Yes, the creator has made the Glyphicons Halflings icons free to use in both personal and commercial projects for Bootstrap. Just be sure to provide credit and link back to Glyphicons where possible.

Where can I find the full list of available Glyphicons?

The complete list of Glyphicons names and associated CSS classes is defined in the files _variables.scss and _glyphicons.scss located within the /scss/_bootstrap folder of the Bootstrap source code.

Also Read:

Editorial Team

The Editorial Team at AnswerCatch.com brings you insightful and accurate content on a wide range of topics. Our diverse team of talented writers is passionate about providing you with the best possible reading experience.