How to guide for Icon Fonts

Step 1: The HP custom icon-fonts available in the toolkit can be seen here

Step 2: check for the icons that are available in the demo file that meets your requirement.

Step 3: If icons are available follow the below embedding an icon font steps to integrate in to the code.

Step 4: if icons are not available, please follow these below steps:

• Send a request to UX for appropriate SVGs.
• Once you receive the SVGs, send an Email Requestto UI Dev Manager phil.parker@hp.com for new icon-fonts for the new SVGs.
• UI team will generate new icon-font package based on your requirement and update the RDS Toolkit icon-font package.
• Once we have a new icon-font package, follow the below embedding an icon font steps to integrate in to the code.

Note for UI Developers: every time new icon- font package is generated, please update the class names and Unicode values for the newly generated icons in icon.scss file.

Here is a path:: hp-rds-toolkit/trunk/src/sass/components/icon.scss.

Please refer to the below steps to embed Icon Fonts in your code

hp-rds-toolkit/trunk/src/fonts/icons

Include the class name (refer Icon Fonts Available for class names) of the particular icon in HTML that you wish to use in your page.

<div class='i-home'></div>

Note: each icon has a unique class name that starts with i- and unique unicode value(like E600).

using @font-face rule we can embed icon font in your css file.

Example:

@font-face {

font-family:'hp-icons';

src:url('fonts/icons/rdt-eot.eot?');

src:url('fonts/icons/rdt-eot.eot?#iefix') format('embedded-opentype'),url('fonts/icons/rdt-woff.woff?') format('woff'),url('fonts/icons/rdt-ttf.ttf?') format('truetype'),url('fonts/icons/rdt-svg.svg?hp-icons') format('svg');

}

The content property is used with :before and :after pseudo-elements.

Assign unicode value you wish to use to the content property.

Example:

.i-home:before {

content:'/e600';

}

Note: Please refer to rdt.css for more idea about how to use.