YouTip

This chapter will explain Glyphicons and demonstrate its usage through some examples. Bootstrap bundles over 200 glyphs in font format. First, let's understand what a glyph icon is. * * * ## What is a Glyph Icon? A glyph icon is an icon font used in web projects. Although (https://glyphicons.com/) requires a commercial license, you can use these icons for free through the project-based Bootstrap. To show appreciation for the icon authors, it is hoped that you will include a link to the GLYPHICONS website when using them. * * * ## Getting Glyph Icons We have already downloaded the Bootstrap 3.x version in the (#) chapter and understood its directory structure. The glyph icons can be found in the _fonts_ folder, which contains the following files: * glyphicons-halflings-regular.eot * glyphicons-halflings-regular.svg * glyphicons-halflings-regular.ttf * glyphicons-halflings-regular.woff The related CSS rules are written in the _bootstrap.css_ and _bootstrap-min.css_ files within the css folder inside the _dist_ folder. ### Glyph Icon List [Click here to view the list of available glyph icons.](#) * * * ## CSS Rule Explanation The following CSS rules constitute the glyphicon class. @font-face{font-family: 'Glyphicons Halflings'; src:url('../fonts/glyphicons-halflings-regular.eot'); src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons _ halflingsregular') format('svg'); }.glyphicon{position:relative; top:1 px; display:inline-block; font-family: 'Glyphicons Halflings'; -webkit-font-smoothing:antialiased; font-style:normal; font-weight:normal; line-height:1; -moz-osx-font-smoothing:grayscale; } So the font-face rule actually declares the font-family and location where the glyphicons are found. The _.glyphicon_ class declares a relative position offset 1px from the top, renders as an inline-block, declares the font, sets font-style and font-weight to normal, and sets line-height to 1. Additionally, it uses _-webkit-font-smoothing: antialiased_ and _-moz-osx-font-smoothing: grayscale;_ to achieve cross-browser consistency. Then, here .glyphicon:empty { width: 1em;} is an empty glyphicon. There are 200 classes here, each targeting a specific icon. The common format for these classes is: .glyphicon-keyword:before { content: "hexvalue";} For example, the user icon uses the following class: .glyphicon-user:before { content: "e008";} * * * ## Usage To use an icon, simply use the following code. Please leave appropriate space between the icon and the text. The following example demonstrates how to use glyph icons: ## Example

User User User [Try it »](#) The result is as follows:  * * * ## Navbar with Glyph Icons ## Example [Try it »](#) * * * ## Customizing Glyph Icons We have seen how to use glyph icons, now let's look at how to customize them. We will start with the example above and customize the icons by changing the font size, color, and applying text shadow. Here is the starting code: User The effect is as follows: ### Customizing Font Size By increasing or decreasing the font size of the icon, you can make it appear larger or smaller. User ### Customizing Font Color User ### Applying Text Shadow User ### Online Glyph Icon Customization [Click here to customize glyph icons »](#) * * * ## Icon List | Icon | Class Name | Example | | --- | --- | --- | | | glyphicon glyphicon-asterisk | (#) | | | glyphicon glyphicon-plus | (#) | | | glyphicon glyphicon-minus | (#) | | | glyphicon glyphicon-euro | (#) | | | glyphicon glyphicon-cloud | (#) | | | glyphicon glyphicon-envelope | (#) | | | glyphicon glyphicon-pencil | (#) | | | glyphicon glyphicon-glass | (#) | | | glyphicon glyphicon-music | (#) | | | glyphicon glyphicon-search | (#) | | | glyphicon glyphicon-heart | (#) | | | glyphicon glyphicon-star | (#) | | | glyphicon glyphicon-star-empty | (#) | | | glyphicon glyphicon-user | (#) | | | glyphicon glyphicon-film | (#) | | | glyphicon glyphicon-th-large | (#) | | | glyphicon glyphicon-th | (#) | | | glyphicon glyphicon-th-list | (#) | | | glyphicon glyphicon-ok | (#) | | | glyphicon glyphicon-remove | (#) | | | glyphicon glyphicon-zoom-in | (#) | | | glyphicon glyphicon-zoom-out | (#) | | | glyphicon glyphicon-off | (#) | | | glyphicon glyphicon-signal | (#) | | | glyphicon glyphicon-cog | (#) | | | glyphicon glyphicon-trash | (#) | | | glyphicon glyphicon-home | (#) | | | glyphicon glyphicon-file | (#) | | | glyphicon glyphicon-time | (#) | | | glyphicon glyphicon-road | (#) | | | glyphicon glyphicon-download-alt | (#) | | | glyphicon glyphicon-download | (#) | | | glyphicon glyphicon-upload | (#) | | | glyphicon glyphicon-inbox | (#) | | | glyphicon glyphicon-play-circle | (#) | | | glyphicon glyphicon-repeat | (#) | | | glyphicon glyphicon-refresh | (#) | | | glyphicon glyphicon-list-alt | (#) | | | glyphicon glyphicon-lock | (#) | | | glyphicon glyphicon-flag | (#) | | | glyphicon glyphicon-headphones | (#) | | | glyphicon glyphicon-volume-off | (#) | | | glyphicon glyphicon-volume-down | (#) | | | glyphicon glyphicon-volume-up | (#) | | | glyphicon glyphicon-qrcode | (#) | | | glyphicon glyphicon-barcode | (#) | | | glyphicon glyphicon-tag | (#) | | | glyphicon glyphicon-tags | (#) | | | glyphicon glyphicon-book | (#) | | | glyphicon glyphicon-bookmark | (#) | | | glyphicon glyphicon-print | (#) | | | glyphicon glyphicon-camera | (#) | | | glyphicon glyphicon-font | (#) | | | glyphicon glyphicon-bold | (#) | | | glyphicon glyphicon-italic | (#) | | | glyphicon glyphicon-text-height | (#) | | | glyphicon glyphicon-text-width | (