GLYPHICONS for the Web

Size: px

Start display at page:

Download "GLYPHICONS for the Web"

Amos Carr
7 years ago
Views:

1 This very simple handbook is intended for all GLYPHICONS PRO users, who will decide to use the icons on the Web. It contns a brief introduction and the examples of how to use the icons, including the examples of the source code and brief FAQ.

2 GLYPHICONS for the Web GLYPHICONS may be used either as an image or as a. The image version is retina ready in two filetypes. The SVG format is not supported by some older browsers and therefore it is necessary to have modernizer.js in your HTML header with running Inline SVG detection. In case you ll decide to implement the icons using the 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 grey to white, etc. How to Implement GLYPHICONS into the Website To incorporate GLYPHICONS into the site 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: 2. Edit Your HTML Header : glyphicons. : glyphicons-regular.eot glyphicons-regular. glyphicons-regular.ttf glyphicons-regular.woff : glyphicons-white. glyphicons-white. glyphicons. : glyphicons. reset. site. style. : <html> <head> <title>glyphicons as a - test page</title> <link rel= stylesheet href= /glyphicons. > <script src= / ></script> </head> <body> /* here is a place for your content and icons itself */ </body> </html> 3. Use Icons in Your Content <i class= glyphicons-icon glass ></i> /* icon by image */ <i class= glyphicons-icon white glass ></i> /* icon by image */ <a href= class= glyphicons glass ></a> /* icon by */ <a href= class= glyphicons white glass ></a> /* icon by */ 2 Handbook

3 Anything Doesn t Work Well? Make sure that you re using the correct file structure and all the files are properly included in your HTML header. Internet Explorer 7 and older browsers doesn t support the -face and therefore it s more appropriate to insert the icons through an image. In case that the icons doesn t appear in Internet Explorer 7 or 8 as an image, it can be caused by missing modernizer.js in your HTML header, which is used to d detection of SVG. When the icons are blurred, make sure that you re using default 12px size for Halflings, 24px size for regular GLYPHICONS or multiples of this size. Also check your CSS file and make certn that it includes all the default values as a kit--smoothing, etc. Unfortunately, using the formate isn t a perfect way, but at this time there is no other way how to keep the icons sharp in all sizes on all devices. Please, keep this in your mind. Any Unclear Things? SVG Format The SVG specification is an open standard and thanks to its cross-browser support of more than 70% it can be used almost anytime on the. towards-retina-/ Modernizr Modernizr is a right micro-library to get you up. It runs with HTML5 & CSS3 today and it is licensed under the MIT license. LESS LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. Icon Font Icon includes all GLYPHICONS as a vectors in one small file. You can change theirs colors, size or even animate them. If you want to create your own, I would recommend using a great app called Glyphs. List of the Icons and Their CSS Classes If you re looking for a list of the all icons and their CSS classes and names, please open this file and you ll get a full list with the live preview: GLYPHICONS PRO/../// 3 Handbook

4 4 glyphicons. glyphicons-regular.otf glyphicons-regular.ttf glyphicons. glyphicons. glyphicons_individual_ glyphicons_1. glyphicons_000_glass. glyphicons. glyphicons. glyphicons-regular.ttf glyphicons. glyphicons. - glyphicons. glyphicons. - glyphicons_halflings. glyphicons_halflings@2x. glyphicons_halflings-regular.otf glyphicons_halflings-regular.ttf glyphicons_halflings. glyphicons_halflings@2x. glyphicons_halflings. halflings_individual_ halflings_1. glyphicons_halflings_000_glass. glyphicons_halflings. glyphicons_halflings@2x. glyphicons_halflings. glyphicons_halflings@2x. halflings. glyphicons-halflings-regular.ttf glyphicons_halflings. halflings. - glyphicons_halflings. glyphicons_halflings. - glyphicons_halflings. glyphicons_halflings. GLYPHICONS PRO - Folder Structure GLYPHICONS GLYPHICONS Halflings

5 5 glyphicons_social. glyphicons_social-regular.otf glyphicons_social-regular.ttf glyphicons_social. glyphicons_social. social_individual_ social_1. glyphicons_social_000_glass. glyphicons_social. glyphicons_social. social. glyphicons-social-regular.ttf glyphicons_social. social. - glyphicons_social. glyphicons_social. - glyphicons_social. glyphicons_social. glyphicons_filetypes. glyphicons_filetypes@2x. glyphicons_filetypes-regular.otf glyphicons_filetypes-regular.ttf glyphicons_filetypes. glyphicons_filetypes@2x. glyphicons_filetypes. filetypes_individual_ filetypes_1. glyphicons_filetypes_000_glass. glyphicons_filetypes. glyphicons_filetypes@2x. glyphicons_filetypes. glyphicons_filetypes@2x. filetypes. glyphicons-filetypes-regular.ttf glyphicons_filetypes. filetypes. - glyphicons_filetypes. glyphicons_filetypes. - glyphicons_filetypes. glyphicons_filetypes. GLYPHICONS PRO - Folder Structure GLYPHICONS Filetypes GLYPHICONS Social

6 Follow GLYPHICONS on Twitter If you are looking for answers on questions related to your order or license, please check the FAQ section on Jan Kovařík By purchasing GLYPHICONS on you get a license to use the icons for both personal and commercial use, including printing and re-using. If you use the icons as a part of your design in your product it is perfectly fine. Keep in mind, please, that it is not allowed to resell the icons themselves, the icons as such are the property of the author. All logos and trademarks in social icons are the property of the respective trademark owners.

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.