Handbook
This very simple handbook is intended for all GLYPHICONS PRO users,
who will decide to use the icons on the Web. It contains a brief introduc-
tion and the examples of how to use the icons, including the examples of
the source code and brief FAQ.
Handbook
2
GLYPHICONS for the Web
How to Implement GLYPHICONS into the Website
To incorporate GLYPHICONS into the website is quite easy. The compatibility is ensured in all modern browsers by
using HTML5, CSS and simple javascript.
1. Copy These Files into Your File Structure:
3. Use Icons in Your Content
css:
glyphicons.css
style.css
fonts:
glyphicons-regular.eot
glyphicons-regular.svg
glyphicons-regular.ttf
glyphicons-regular.woff
images:
glyphicons-white.png
glyphicons-white.svg
glyphicons.png
glyphicons.svg
less:
glyphicons.less
reset.less
site.less
style.less
scripts:
modernizr.js
2. Edit Your HTML Header
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>GLYPHICONS as a font - test page</title>
<link rel=”stylesheet” href=”css/glyphicons.css”>
<script src=”scripts/modernizr.js”></script>
</head>
<body>
/* here is a place for your content and icons itself */
</body>
</html>
1
2
3
4
5
6
7
<i class=”glyphicons-icon glass”></i> /* dark icon by image */
<i class=”glyphicons-icon white glass”></i> /* light icon by image */
<a href=”” class=”glyphicons glass”></a> /* dark icon by font */
<a href=”” class=”glyphicons white glass”></a> /* light icon by font */
GLYPHICONS may be used either as an image or as a
font. The image version is retina ready in two filetypes.
The SVG format is not supported by some older web
browsers and therefore it is necessary to have mod-
ernizer.js in your HTML header with running Inline SVG
detection.
In case you’ll decide to implement the icons using the
font you’ll be able to change their color, size and even
animate them very easily. Simply by changing classes
it is possible to change the color of the icons from dark
grey to white, etc.